Internet
Now Reading
12ο Μάθημα HTML-Χρήση Βίντεο
0

12ο Μάθημα HTML-Χρήση Βίντεο

by Ελένη Χαλικιά19 November, 2012


Περιγραφή Μαθήματος
Στο σημερινό μας μάθημα θα δείτε τις ετικέτες για το πως να εισάγετε βίντεο στην ιστοσελίδα σας και μερικά παραδείγματα για να τις κατανοήσετε.

Εισαγωγή
Με τη χρήση βίντεο στις ιστοσελίδες σας μπορείτε να δώσετε ζωντάνια πάνω σε θέματα τα οποία τις αφορούν άμεσα ή έμμεσα.

Σημασιολογία ετικετών
<video: Αυτό χρησιμεύει για να ανοίξετε την ετικέτα εισαγωγής ενός βίντεο

width=”200″: Αυτό χρησιμεύει για να προσδιορίσετε το πλάτος, το οποίο θέλετε να έχει το βίντεο σας μέσα στην ιστοσελίδα σαςheight=”150″: Αυτό χρησιμεύει για να προσδιορίσετε το ύψος, το οποίο θέλετε να έχει το βίντεο σας μέσα στην ιστοσελίδα σας
controls=”controls”: Αυτό χρησιμεύει για να προσθέσετε στο βίντεο σας την αναπαραγωγή αλλά και την παύση του

autoplay=”autoplay”: Αυτό χρησιμεύει για να προσθέσετε στο βίντεο σας τη δυνατότητα της αυτόματης αναπαραγωγής

 
source src=”name_video.type_video”: Αυτό χρησιμεύει για να προσδιορίσετε το βίντεο σας, δηλαδή να προσδιορίστε την ονομασία αλλά και την ακριβή μορφή
του βίντεο σας
 
type=”video/mp4″: Αυτό χρησιμεύει για να προσδιορίσετε τον τύπο του βίντεο, δηλαδή προσδιορίσετε σε τι μορφή είναι το βίντεο σας
 
</video>: Αυτό χρησιμεύει για να κλείσετε την ετικέτα εισαγωγής ενός βίντεο
 
Σήμανση
Μερικές μορφές ή αλλιώς οι τύποι οι οποίοι είναι τα βίντεο είναι τα mp4, webm, ogg.  Επίσης σας αναφέρω τη συμβατότητα μερικών μορφών βίντεο με τους φυλλομετρητές (Broswer):
 
Internet Explorer: mp4
Firefox: webm, ogg
Google Chrome: mp4, webm, ogg
 
Σύνταξη Κώδικα
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε την εισαγωγή ενός βίντεο από τον προσωπικό σας υπολογιστήστην ιστοσελίδα σας με τη δυνατότητα αναπαραγωγής και παύσης του βίντεο.

 

<!DOCTYPEhtml>
<html>
<body>
<videowidth=”Εδώ βάζετε το πλάτος του βίντεο σας” height=”Εδώ βάζετε το ύψος του βίντεο σας” controls=”controls”>
<sourcesrc=”Εδώ βάζετε την ονομασία και τον τύπο του βίντεο σας”   type=”video/Εδώ βάζετε τον τύπο του βίντεο σας“>
</video>
</body>
</html>
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε την εισαγωγή ενός βίντεο από τον προσωπικό σας υπολογιστή στην ιστοσελίδα σας με τη δυνατότητα αυτόματης αναπαραγωγής του βίντεο.
 
<!DOCTYPEhtml>
<html>
<body>
<videowidth=”Εδώ βάζετε το πλάτος του βίντεο σας” height=”Εδώ βάζετε το ύψος του βίντεο σας” controls=”controls” autoplay=”autoplay”>
<sourcesrc=”Εδώ βάζετε την ονομασία και τον τύπο του βίντεο σας”   type=”video/Εδώ βάζετε τον τύπο του βίντεο σας“>
</video>
</body>
</html>

 

Παράδειγμα 1
Αυτό είναι ένα μικρό παράδειγμα για τη χρήση βίντεο με δυνατότητα αναπαραγωγής και παύσης του βίντεο.
 

Κώδικας Παραδείγματος:

<!DOCTYPE html>
<html>
<body>
<video width=200″ height=”350″ controls=”controls”>
<source src=”Δοκιμαστικό.mp4″   type=”video/mp4″>
</video>
</body>
</html>
 
Παράδειγμα 2
Αυτό είναι ένα μικρό παράδειγμα για τη χρήση βίντεο με
δυνατότητα αυτόματης αναπαραγωγής του βίντεο.
 
 

Κώδικας Παραδείγματος:

<!DOCTYPE html>
<html>
<body>
<video width=200″ height=”350″ controls=”controls” autoplay=”autoplay”>
<source src=”Δοκιμαστικό.mp4″   type=”video/mp4″>
</video>
</body>
</html>

 

Επίλογος
Στο επόμενο μάθημα μας για την HTML θα δείτε τις ετικέτες για το πως να δημιουργήσετε πλαίσια σε μια ιστοσελίδα και ποιο συγκεκριμένα τα εξής:
  • Σημασιολογία των ετικετών
  • Χρήση των ετικετών
  • Παραδείγματα ετικετών

Κατέβασμα Μαθήματος

Κατεβάστε το δωδέκατο μας μάθημα HTML στον υπολογιστή σας εντελώς δωρεάν σε μορφή pdf.
Download 
 
Συντάκτης
Ελένη Χαλικιά
Τεχνικός Τεχνολογίας Internet
Τεχνικός Εφαρμογών Πληροφορικής

Comments

comments