Video HTML5 10 Pereka Perkara Perlu Tahu

Revolusi HTML5 adalah pereka web yang menarik dari semua bidang di dunia. Spesifikasi baru menyokong berpuluh-puluh elemen dan sifat untuk membina laman web semantik. Ciri-ciri baru ini termasuk tag multimedia untuk format audio dan video.

Dalam beberapa tahun yang lalu, pemain media berasaskan Flash lebih mencukupi untuk streaming di Web dan teknologi ini masih diperlukan untuk menyokong pelayar warisan. Tapi syukurlah piawaian moden telah maju dan kemasukan video HTML5 membuka pintu untuk berpuluh-puluh peluang baru.

Dalam panduan ini, saya ingin menawarkan pengenalan kepada video HTML5 untuk Web. Ia akan mengambil beberapa amalan untuk memahami pemain asal dalam pelayar dan semua fungsinya. Dan cara terbaik untuk mengenali adalah menyelam di kepala terlebih dahulu!

1. Jenis Media

Apabila anda bekerja dengan pemain video flash, semuanya sangat biasa untuk mengaitkan semua format video dalam .flv. Walaupun ini berfungsi, kebanyakan fail flv tidak dapat mengekalkan kualiti di mana-mana berhampiran format fail canggih / codec. Terdapat 3 jenis video penting yang disokong oleh HTML5: MP4, WebM, dan Ogg / Ogv. Jenis fail MPEG-4 umumnya dikodkan dalam H.264 yang membolehkan main balik dalam pemain Flash pihak ketiga. Ini bermakna anda tidak perlu menyimpan salinan video .flv untuk menyokong kaedah sandaran! WebM dan Ogg adalah dua jenis fail yang lebih baru yang berkaitan dengan video HTML5. Ogg menggunakan pengekod Theora yang berdasarkan format fail audio standard sumber terbuka. Ini boleh disimpan dengan sambungan .ogg atau .ogv.

WebM adalah projek yang dikeluarkan oleh Google yang boleh anda baca lebih lanjut mengenai laman web Projek WebM. Format ini telah disokong oleh Opera, Google Chrome, Firefox 4+, dan Internet Explorer terbaru 9. Ia masih tidak diketahui oleh kebanyakan profesional web tetapi WebM adalah format media video utama di masa hadapan video web.

2. Sokongan Penyemak Imbas

Jadi mana antara jenis fail yang anda perlukan untuk tapak web anda? Secara idealnya semua 3 akan menjadi hebat kerana mereka menyediakan spektrum sokongan penuh. Tetapi ini tidak realistik, dan sebenarnya, anda boleh merangkumi semua pangkalan dengan hanya dua daripada mereka. Berikut adalah pecahan apa yang berfungsi untuk setiap penyemak imbas:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Tiada HTML5, Flash Hanya!

Jika anda masih ingat, lebih awal saya menyebut bahawa kebanyakan pemain video flash akan menyokong fail MP4 selagi mereka dikodkan dalam H.264. Oleh itu, setiap pelayar ini akan membenamkan MP4 + Flash sebagai tempat terakhir. Ini bermakna anda hanya perlu membuat dua format video yang berbeza untuk menyokong semua penyemak imbas. MP4 untuk Safari / IE9 dan pilihan antara WebM atau Ogg untuk selebihnya.

Pada pendapat saya, saya sangat mengesyorkan melekat dengan format WebM. Ia mempunyai beberapa nama besar di belakang projek (iaitu Google) dan telah mendapat banyak daya tarikan dalam komuniti HTML5. Ogg / Ogv akan disokong tetapi kemungkinan besar akan kehilangan populariti ke saiz fail WebM yang lebih kecil. Anda boleh membaca bahagian yang berkaitan pada masa depan video di web yang ditulis oleh Sean Golliher.

3. Menanamkan Video HTML5 Mudah

Mari kita lihat sintaks yang diperlukan untuk membenamkan beberapa kod sampel. Yang kita perlukan ialah tag video HTML5 untuk merujuk setiap URL filem.

Perhatikan kawalan dan autoplay atribut tidak perlu ditetapkan dengan sebarang nilai. Saya juga termasuk a poster atribut yang preloads imej ke atas pemain video sebelum streaming. Ini adalah pratonton biasa dengan banyak pemain web.

Kami menawarkan kedua-dua format MP4 dan WebM kepada elemen video. Sekiranya kedua-duanya tidak boleh dimuat maka kita akan memaparkan ralat untuk pengguna untuk mengemas kini penyemak imbas mereka.

4. Menawarkan Fallback Flash

Contoh di atas sesuai untuk semua pelayar web yang mematuhi piawaian. Namun kita juga perlu mempertimbangkan bahawa dunia tidak selalunya di canggih teknologi. Kita perlu menyokong pengguna pada versi lama Safari, Mozilla Firefox, dan terutama Internet Explorer.

Cara terbaik untuk mencapai matlamat ini ialah melalui pemain mundur Flash. Ini boleh ditambah menggunakan membenamkan atau objek tag untuk merujuk file pihak ketiga .swf. JW Player dan Flowplayer adalah dua penyelesaian sumber terbuka percuma yang boleh anda pertimbangkan. Tetapi juga lihat pemain video premium di ActiveDen yang boleh menjadi murah sebanyak $ 15- $ 20.

Sekarang mari tweak kod di atas untuk menyertakan pemain Flash fallback untuk menyokong hampir setiap penyemak imbas yang wujud.

5. Sokongan Peranti Mudah Alih

Topik ini masih banyak diperdebatkan sejak industri mudah alih begitu muda. Apple keluar dengan sokongan untuk MP4 pada peranti Mac dan iOS. Ini bermakna anda boleh mengalirkan fail video .mp4 secara native pada iPad, iPhone atau iPod Touch anda dalam UI video standard. Ini meliputi banyak bahagian pasaran.

Peranti Android baru-baru ini mempunyai masa yang sukar untuk mendapat tahap sokongan yang sama. Bagaimanapun, Google telah akhirnya mengadopsi web streaming .mp4 yang kini memanfaatkan hampir semua pengguna mudah alih. Dan sejak Flash bukan pilihan di sini MP4 adalah penyelesaian terbaik yang ada. Inilah sebabnya mengapa anda ingin memasukkan kod .mp4 terlebih dahulu supaya peranti iOS dapat mengenali fail dengan serta-merta.

6. Ejen Pengguna Safari

Satu pepijat yang mesti disebutkan ialah antara pemain Flash dan penyertaan HTML5 .mp4 pada Safari. Oleh kerana penyemak imbas boleh menyokong kedua-dua fail, anda mungkin menghadapi masalah mendapatkan aliran video HTML5 di tempat Flash. Bagaimanapun terima kasih kepada catatan blog hebat ini di TUAW, mudah untuk mengubah ejen pengguna pelayaran anda.

Ini akan memaksa halaman web anda mengenali pelayar seperti yang dijalankan pada peranti lain. Kemungkinan besar anda akan memilih iPad, yang TIDAK menyokong sebarang main balik Flash. Ini adalah satu-satunya masalah utama yang mungkin anda jalankan semasa menguji kaedah main balik MP4 asli & flash.

7. Menguruskan Kawalan Pemain

Percaya atau tidak ada juga kaedah yang boleh anda gunakan untuk memanipulasi kawalan pemain video HTML5. Ia semua boleh dilakukan dalam JavaScript dengan menarik dari satu set kaedah terbuka. Terdapat banyak cara untuk disenaraikan di sini, tetapi cuba skim melalui dokumen elemen media W3C untuk maklumat lanjut.

Untuk memberi anda idea umum, blog dev Dev telah menyiarkan beberapa tutorial pendek yang bagus untuk pemula. Walaupun anda tidak pernah mengambil JavaScript atau jQuery sebelum ini, ia masih mudah untuk memukul tanah yang berjalan dengan yang satu ini. Anda boleh memanggil atribut khusus media video seperti diredamkan atau currentTime. Kemudian anda boleh melakukan tindakan (redup latar belakang, iklan paparan) berdasarkan kriteria ini dengan memanipulasi DOM dalam jQuery.

Pemaju yang sama dalam artikel Opera menyediakan demo kerja pemain video skrip mereka. Peluang untuk menyesuaikan kawalan UI anda sendiri adalah luar biasa. Ia hanya menunjukkan betapa kuatnya video HTML5.

8. Penukaran Format Video

Ini adalah satu lagi isu besar yang mungkin akan mengelirukan orang kurang pintar teknologi. Anda hanya mahu mendapatkan laman web anda dan streaming dan sekarang anda perlu berurusan dengan menukar video? Baik itu sebenarnya bukan semua yang sukar.

Untuk menangani MP4 yang menjadi keutamaan anda, anda boleh menggunakan HandBrake yang merupakan penyelesaian sumber terbuka percuma yang berjalan pada semua 3 OS utama. Ia akan menyokong H.264 bersama dengan beberapa codec lain yang menjadikan ini pilihan terbaik untuk pengguna freebie. Jika anda mempunyai wang untuk keluar, saya mesti mencadangkan penukar Xilisoft yang berada di Mac App Store untuk hanya $ 40 seumur hidup lesen.

Ia kelihatan seperti laluan WebM menjadikan kehidupan lebih mudah. Miro Video Converter adalah alat percuma untuk Windows dan OS X yang menghasilkan file WebM berkualiti tinggi. Ia juga boleh melakukan pengekodan Ogg Theora yang keluar dengan kualiti yang sangat baik juga.

9. Membina Pemain Web

Format video dengan spesifikasi HTML5 masih baru untuk pemaju. Terdapat protokol terbuka yang hanya menunggu untuk dimainkan untuk membolehkan kawalan tersuai, slider, ikon main / jeda, dan sebagainya. Jika anda merasa berani, lihat tutorial ini tentang cara membuat pemain HTML5 anda sendiri (diterbitkan di Splashnology).

Kod ini agak sengit untuk pendatang baru kerana memerlukan penargetan CSS lanjutan dan sedikit jQuery rasmi. Terdapat rangka kerja lain yang anda boleh membina yang telah menawarkan reka bentuk pemain yang disesuaikan. Begitu juga persembahan slaid ini merupakan pengenalan hebat untuk membina pemutar video HTML5.

Membina Pemain Video HTML5

10. Perpustakaan VideoJS

VideoJS mungkin penyelesaian kegemaran saya kepada pemain video HTML5. Apa yang anda perlukan ialah jujukan gaya JavaScript dan CSS yang dihoskan diri anda disertakan di suatu tempat dalam dokumen anda. Kemudian anda menulis kod video HTML5 standard dengan beberapa kelas tambahan untuk meng skinning. Saya menambah kod sampel mereka di bawah:

Sekiranya anda menjalankan blog WordPress anda juga boleh mencuba plugin WP kustom mereka. Ia akan secara automatik memasukkan js / css perpustakaan pada halaman di mana anda memaparkan video HTML5. Dan anda boleh melakukan ini dari dalam mana-mana jawatan atau editor halaman menggunakan kod pendek (lihat di sini).

Kesimpulannya

Saya harap panduan pengenalan ini dapat menimbulkan minat anda pada masa depan video web. Dengan lebih banyak pengguna beralih ke mudah alih, pentingnya standard HTML5 diterima pakai untuk jenis media ini. Web harus dibuat mudah supaya pemaju dapat menghasilkan penyelesaian yang disokong sepenuhnya lebih cepat. Kami ingin mendengar idea dan cadangan anda untuk masa depan video HTML5. Sekiranya anda ingin berkongsi sila berasa bebas untuk meninggalkan komen di kawasan perbincangan pos di bawah.