Artikel Pengenalan Wulin.com (www.vevb.com): HTML 5 Tinjauan Video.
1 Pendahuluan Video
Mengutip teks pengantar dari dokumen terjemahan saya "Embed Audio dan Video di HTML5 halaman": Hari ini, satu -satunya cara yang dapat diandalkan untuk menanamkan video di halaman web dan melihat mereka semua pengguna terlepas dari browser atau sistem operasi mereka adalah dengan menggunakan Flash. Ini membutuhkan plugin Adobe Flash dan menggabungkan tag <pesope> dan <sembed>.
Sebagian besar pengguna sudah menginstal plugin flash (pada kenyataannya, sekitar 95% pengguna internet memiliki versi flash tertentu), tetapi pendukung HTML 5 mendorong standar terbuka, standar yang tidak memerlukan plugin apa pun. Ini adalah ide yang dibawa ke tag baru HTML 5 <Video>, yang menyediakan cara untuk menanamkan video (dan berinteraksi dengan mereka) tanpa perlu plugin pribadi seperti Flash.
Sayangnya, videonya tidak sesederhana itu. Browser tidak hanya perlu memahami tag <dide>, tetapi juga pengkodean dan dekoder yang diperlukan untuk memutar video. Solusi yang jelas hanya untuk pencipta spesifikasi HTML 5 untuk memilih codec video dan membiarkan setiap produsen browser menjalankannya.
Bagaimanapun, itulah yang Anda rekomendasikan. Pada saat yang sama, ini juga sekering yang menyebabkan kekacauan. Perdebatan tentang berbagai codec sudah sangat menjengkelkan, tetapi hal yang lebih tragis adalah bahwa produsen browser tidak dapat mencapai akhir yang disatukan. Apple enggan menggunakan OGG Theora Codec yang diusulkan, tetapi Opera dan Mozilla juga tidak mau membayar biaya lisensi karena browser mereka memuat codec H.264. Google mendukung keduanya, dan Microsoft jauh di belakang perdebatan karena tidak memiliki rencana untuk mendukung elemen video HTML 5 sama sekali.
Dihadapkan dengan kebuntuan pembuat browser, HTML 5 diktator yang bermaksud baik Ian Hickson menjabat tangannya dan berkata sialan. Oleh karena itu, tidak ada codec pengkodean video yang dinamai khusus atau khusus dalam spesifikasi HTML 5. Oke, kutip di sini.
Situasinya adalah bahwa Microsoft akhirnya terjebak, tetapi secara tragis, itu hanya mendukung H.264 di IE 9. Pada saat yang sama, Google akhirnya merilis format enkapsulasi video open source dan format pengkodean video VP8 di konferensi I/O. Opera, Mozilla, dan Chrome mengumumkan bahwa mereka akan sepenuhnya mendukung VP8, dan IE mengumumkan bahwa beberapa dukungan (diperlukan plug-in, tetapi jika saya ingat dengan benar, salah satu visi HTML5 adalah untuk meninggalkan plug-in browser, yang benar-benar tragis untuk Microsoft).
Apple memutuskan untuk tidak mendukung VP8. Jobs percaya bahwa VP8 tidak sebagus H.264 dalam hal kualitas atau efisiensi dan tidak dapat memenuhi persyaratan produknya. Selain itu, berita terbaru menunjukkan bahwa VP8 juga dapat melibatkan masalah paten (jika paten benar -benar dilanggar, Opera dan Firefox mungkin akan segera mengabaikan VP8).
Setelah mengatakan begitu banyak, pada akhirnya, jika Anda ingin menggunakan tag <video> pada halaman, Anda perlu mempertimbangkan tiga situasi: mereka yang mendukung OGG Theora atau VP8 (jika tidak ada yang terjadi pada hal ini) (Opera, Mozilla, Chrome), yang mendukung H.264 (Safari, IE 9, Chrome), yang tidak didukung (yaitu, 7, 7, 7, 7, 7, 7, 7, 7).
Nah, sekarang mari kita pahami video HTML 5 dari tingkat teknis, termasuk penggunaan tag <video>, properti media dan metode yang dapat digunakan objek video, dan acara media.
2 penggunaan tag video
Tag video berisi beberapa atribut seperti SRC, poster, preload, autoplay, loop, kontrol, lebar, tinggi, dll., Serta tag yang digunakan secara internal <source>.
Selain tag <source>, tag video juga dapat menyertakan konten yang dikembalikan ketika tidak ada video yang ditentukan yang tidak dapat diputar.
2.1 Atribut SRC dan Atribut Poster
Dapatkah Anda membayangkan untuk apa atribut SRC digunakan. Seperti tag <mmg>, properti ini digunakan untuk menentukan alamat video.
Atribut poster digunakan untuk menentukan gambar dan menampilkannya ketika data video saat ini tidak valid (gambar pratinjau). Data video yang tidak valid mungkin karena video dimuat, mungkin karena alamat video salah, dll.
2.2 Atribut Preload
Properti ini juga dapat digunakan dengan nama, yang digunakan untuk menentukan apakah video tersebut dimuat sebelumnya. Ada tiga nilai opsional untuk atribut: tidak ada, metadata, dan otomatis. Jika properti ini tidak digunakan, standarnya adalah otomatis.
Tidak ada: Tidak ada preloading. Menggunakan nilai properti ini mungkin bahwa pembuat halaman percaya bahwa pengguna tidak mengharapkan video ini, atau mengurangi permintaan HTTP.
Metadata: sebagian dimuat sebelumnya. Menggunakan nilai atribut ini berarti bahwa pembuat halaman percaya bahwa pengguna tidak mengharapkan video ini, tetapi memberikan pengguna metadata (termasuk ukuran, bingkai pertama, daftar trek, durasi, dll.).
Otomatis: Semua dimuat sebelumnya.
2.3 ATRIBUT AUTOPLAY
Atribut lain yang mengetahui penggunaannya sesuai dengan namanya. Properti Autoplay digunakan untuk mengatur apakah video diputar secara otomatis, dan merupakan properti Boolean. Ketika muncul, itu berarti pemutaran otomatis, dan menghapusnya berarti tidak pemutaran secara otomatis.
Perhatikan bahwa nilai -nilai atribut boolean dalam HTML tidak benar dan salah. Penggunaan yang benar adalah menggunakan atribut ini untuk mewakili True dalam tag. Pada saat ini, atribut tidak memiliki nilai atau nilainya selalu sama dengan namanya (di sini, pemutaran otomatis adalah <Video Autoplay /> atau <Video Autoplay = Autoplay />); Meskipun atribut ini tidak digunakan dalam tag untuk mewakili false (di sini, pemutaran otomatis adalah <video />).
2.4 Atribut Loop
Jelas sekali bahwa atribut loop digunakan untuk menentukan apakah video diputar loop, dan juga merupakan atribut boolean.
2.5 Atribut Kontrol
Properti Controls digunakan untuk menunjukkan kepada browser bahwa pembuat halaman tidak menggunakan skrip untuk menghasilkan pengontrol pemutaran, dan browser mengharuskan browser untuk mengaktifkan bilah kontrol pemutarannya sendiri.
Bilah kontrol harus mencakup kontrol jeda pemutaran, kontrol kemajuan pemutaran, kontrol volume, dll.