HTML5 και χρήση Video

Μετά τα δύο πρώτα εισαγωγικά μαθήματα στην HTML, συνεχίζουμε με τη γνωριμία με την πιο πρόσφατη έκδοση της γλώσσας, την HTML5.

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.blogspot.com/2020/04/online-editor-html.html 

Η HTML5 είναι η τελευταία εξέλιξη της γλώσσας HTML η οποία χρησιμοποιείται εκτενώς και στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές. Η HTML5 προσθέτει νέα χαρακτηριστικά δομής και σύνταξης, δίνοντας ιδιαίτερο βάρος στη σημασιολογία των ετικετών, καθώς και νέες δυνατότητες που περιορίζουν την ανάγκη χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης. Ξεχωρίζουν μεταξύ άλλων:

• νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου, όπως οι header, section, article και nav.
• νέες ετικέτες για εισαγωγή ήχου και βίντεο, τις audio και video αντίστοιχα.
• νέες δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης (offline web applications).
• εμπλουτισμένα στοιχεία για φόρμες (όπως ημερομηνίες, ηλεκτρονικές διευθύνσεις, εύρος τιμών) και πινακοποιημένα δεδομένα καθώς και ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG.

Ας ασχοληθούμε με την εισαγωγή ενός βίντεο σε μια ιστοσελίδα. Η HTML5 επιτρέπει την απευθείας χρήση video στις μορφές .mp4 (αλλά και .ogg και πρόσφατα .webm) 

Η ετικέτα video περιλαμβάνει ιδιότητες που καθορίζουν στοιχεία όπως το μέγεθος του βίντεο, το αν θα παρέχονται πλήκτρα ελέγχου όπως έλεγχος έντασης ήχου και διακοπής της αναπαραγωγής.

<video 

source src=https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4

 width="480" height="270"  controls> </video>

Παρατηρήστε στο παράδειγμα:

• την ιδιότητα src που περιέχει τη διεύθυνση του αρχείου βίντεο 
• (στο παράδειγμά μας είναι https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4 )
• τις ιδιότητες width και height για τον ορισμό των διαστάσεων (480 πλάτος και 270 ύψος στο παράδειγμά μας)
• την ιδιότητα controls για την εμφάνιση των στοιχείων ελέγχου  (δηλαδή να αρχίζει να παίζει, να σταματά κλπ)
• το κλείσιμο της ετικέτας video με </video>

ΠΡΟΣΟΧΗ το βιβλίο μας έχει ένα ΤΥΠΟΓΡΑΦΙΚΟ ΛΑΘΟΣ και στο παράδειγμα που έχει, έχουν παραλείψει το  <source>  tag, η σωστή σύνταξη φαίνεται στο επόμενο παράδειγμα που έχει για την ενσωμάτωση του ήχου

<audio controls>
        <source src="ixos.mp3" type="audio/mpeg" />

</audio>  

Περισσότερα για τη χρήση βίντεο μπορούν να βρεθούν στο https://www.w3schools.com/html/html5_video.asp

Πολύ συχνά ωστόσο τα βίντεο που θέλουμε να χρησιμοποιήσουμε μπορεί να βρίσκονται στο YouTube  ή σε κάποια ανάλογη υπηρεσία, όπως πχ το Vimeo

Για να χρησιμοποιήσουμε ένα τέτοιο βίντεο στην ιστοσελίδα μας (σεβόμενοι πάντα τυχόν πνευματικά δικαιώματα!!!) κάνουμε τη διαδικασία της ενσωμάτωσης του βίντεο

Ας δοκιμάσουμε να ενσωματώσουμε μια θεατρική παράσταση (Ο ΕΧΘΡΟΣ ΤΟΥ ΛΑΟΥ - ΕΡΡΙΚΟΣ ΙΨΕΝ) (εσείς μπορείτε να βρείτε κι οποιοδήποτε άλλο βίντεο...)

Για να το κάνουμε αυτό ακολουθούμε τα παρακάτω βήματα

1) Πάμε στο youtube και αναζητούμε το βίντεο που θέλουμε (στο παράδειγμα γράφουμε  " ο εχθρος του λαου ". Πατάμε στο πρώτο βίντεο που βγάζει

2) Πατάμε το κουμπί Share  

3) Εμφανίζεται ένα μικρό παράθυρο κι επιλέγουμε το "Embed" (δηλαδή ενσωμάτωση)

4) Στο παράθυρο που εμφανίζεται πατάμε το κουμπί copy (αντιγραφή) 

5) Πάμε στην ιστοσελίδα μας και κάνουμε επικόλληση 

(Για το συγκεκριμένο παράδειγμα μπορείτε να βάλετε κατευθείαν το ακόλουθο)

<iframe width="560" height="315" 

   src="https://www.youtube.com/embed/HUgZyQIxFAw" frameborder="0"  allowfullscreen> 

</iframe>

ΔΡΑΣΤΗΡΙΟΤΗΤΑ

Στο https://www.w3schools.com/html/    δοκιμάστε να κάνετε την εισαγωγή ενός βίντεο mp4 και την εισαγωγή ενός βίντεο από το YouTube. Στη συνέχεια, οπως και στις ασκήσεις   των προηγούμενων 2 εβδομάδων στείλτε μέσω email τη σελίδα που δημιουργήσατε. 

Επειδή στην παρούσα φάση είναι ίσως κάπως δύσκολο να βρεθεί βίντεο mp4 μπορείτε να χρησιμοποιήσετε ως πηγή το https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4