BELAJAR HTML5 BAG. 2
Video didalam Web
Sampai saat ini, belum ada standar untuk menampilkan video / film pada halaman web.
Saat ini, video yang paling ditampilkan melalui plug-in (seperti flash). Namun, browser yang berbeda mungkin memiliki berbagai plug-in.
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan video / film pada halaman web: elemen <video>.
Browser Dukungan
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung elemen <video>.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <video>.
HTML5 Video - Cara Bekerja
Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:
Dibawah ini adalah contoh script html5 untuk memasang sumber video ;
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
sebagai contoh anda juga bisa mencoba dan merubahnya sendiri di halaman web ini ;
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all
Atribut kontrol menambahkan kontrol video, seperti play, pause, dan volume.
Ini juga merupakan ide yang baik untuk selalu menyertakan atribut lebar dan tinggi. Jika tinggi dan lebar diatur, ruang yang diperlukan untuk video dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut, browser tidak mengetahui ukuran video, dan tidak bisa memesan ruang yang tepat untuk itu. Efeknya akan bahwa tata letak halaman akan berubah selama pemuatan (sementara beban video).
Anda juga harus memasukkan konten teks antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen <video>.
Elemen <video> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama.
Video Format Dukungan dan Browser
Sampai saat ini, belum ada standar untuk menampilkan video / film pada halaman web.
Saat ini, video yang paling ditampilkan melalui plug-in (seperti flash). Namun, browser yang berbeda mungkin memiliki berbagai plug-in.
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan video / film pada halaman web: elemen <video>.
Browser Dukungan
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung elemen <video>.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <video>.
HTML5 Video - Cara Bekerja
Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:
Dibawah ini adalah contoh script html5 untuk memasang sumber video ;
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
sebagai contoh anda juga bisa mencoba dan merubahnya sendiri di halaman web ini ;
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all
Atribut kontrol menambahkan kontrol video, seperti play, pause, dan volume.
Ini juga merupakan ide yang baik untuk selalu menyertakan atribut lebar dan tinggi. Jika tinggi dan lebar diatur, ruang yang diperlukan untuk video dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut, browser tidak mengetahui ukuran video, dan tidak bisa memesan ruang yang tepat untuk itu. Efeknya akan bahwa tata letak halaman akan berubah selama pemuatan (sementara beban video).
Anda juga harus memasukkan konten teks antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen <video>.
Elemen <video> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama.
Video Format Dukungan dan Browser
Browser
|
MP4
|
WebM
|
Ogg
|
Internet Explorer 9
|
YES
|
NO
|
NO
|
Firefox 4.0
|
NO
|
YES
|
YES
|
Google Chrome 6
|
YES
|
YES
|
YES
|
Apple Safari 5
|
YES
|
NO
|
NO
|
Opera 10.6
|
NO
|
YES
|
YES
|
- MP4 = MPEG 4 files with H264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
HTML5 Video Tags
Tag
|
Description
|
Defines a video or movie
|
|
Defines multiple media resources for
media elements, such as <video> and < audio>
|
|
Defines text tracks in mediaplayers
|
Posting Komentar