Video HTML5 10 Hal Yang Perlu Diketahui Desainer
Revolusi HTML5 adalah perancang web yang menarik dari semua wilayah di dunia. Spesifikasi baru mendukung puluhan elemen dan atribut untuk membangun situs web semantik. Fitur-fitur baru ini termasuk tag multimedia untuk format audio dan video.
Dalam beberapa tahun terakhir, pemutar media berbasis Flash lebih dari cukup untuk streaming di Web dan teknologi ini masih diperlukan untuk mendukung browser lawas. Tapi untungnya standar modern telah maju dan dimasukkannya video HTML5 membuka pintu bagi puluhan peluang baru.
Dalam panduan ini saya ingin menawarkan pengantar video HTML5 untuk Web. Dibutuhkan latihan untuk memahami pemutar dalam-peramban asli dan semua fungsinya. Dan cara terbaik untuk membiasakan diri adalah menyelam terlebih dahulu!
1. Jenis Media
Saat Anda bekerja dengan pemutar video flash, terlalu umum untuk mengaitkan semua format video di .flv. Walaupun ini berhasil, sebagian besar file flv tidak dapat mempertahankan kualitas di dekat format file / codec yang lebih canggih. Ada 3 jenis video penting yang didukung oleh HTML5: MP4, WebM, dan Ogg / Ogv. Jenis file MPEG-4 umumnya dikodekan dalam H.264 yang memungkinkan untuk diputar di pemutar Flash pihak ketiga. Ini berarti Anda tidak perlu menyimpan salinan video .flv untuk mendukung metode mundur! WebM dan Ogg adalah dua jenis file yang jauh lebih baru terkait dengan video HTML5. Ogg menggunakan pengodean Theora yang didasarkan pada format file audio standar open-source. Ini dapat disimpan dengan ekstensi .ogg atau .ogv.
WebM adalah proyek yang dikeluarkan oleh Google yang dapat Anda baca lebih lanjut di situs web Proyek WebM. Format sudah didukung oleh Opera, Google Chrome, Firefox 4+, dan yang terbaru Internet Explorer 9. Masih belum diketahui oleh sebagian besar profesional web tetapi WebM adalah format media video terkemuka di masa depan video web.
2. Dukungan Browser
Jadi, jenis file manakah yang Anda butuhkan untuk situs web Anda? Yah idealnya ketiga akan menjadi besar karena mereka memberikan spektrum dukungan penuh. Namun ini tidak realistis, dan pada kenyataannya, Anda dapat menutupi semua pangkalan hanya dengan dua pangkalan. Berikut ini rincian dari apa yang berfungsi untuk setiap browser:
- Mozilla Firefox - WebM, Ogg
- Google Chrome - WebM, Ogg
- Opera - WebM, Ogg
- Safari - MP4
- Internet Explorer 9 - MP4
- Internet Explorer 6-8 - Tanpa HTML5, Hanya Flash!
Jika Anda ingat, sebelumnya saya menyebutkan bahwa sebagian besar pemutar video flash akan mendukung file MP4 selama mereka disandikan dalam H.264. Dengan demikian, masing-masing browser ini akan menanamkan MP4 + Flash sebagai pilihan terakhir. Ini berarti Anda hanya perlu membuat dua format video berbeda untuk mendukung semua browser. MP4 untuk Safari / IE9 dan pilihan antara WebM atau Ogg untuk yang lainnya.
Menurut pendapat saya, saya sangat merekomendasikan tetap dengan format WebM. Ini memiliki beberapa nama besar di belakang proyek (yaitu Google) dan telah mendapatkan banyak daya tarik di komunitas HTML5. Ogg / Ogv akan didukung tetapi kemungkinan besar akan kehilangan popularitasnya karena ukuran file yang lebih kecil dari WebM. Anda dapat membaca bagian terkait tentang masa depan video di web yang ditulis oleh Sean Golliher.
3. Menyematkan Video HTML5 Sederhana
Sekarang mari kita lihat sintaks yang diperlukan untuk menyematkan beberapa kode sampel. Yang kami butuhkan adalah tag video HTML5 untuk mereferensikan setiap URL film.
Perhatikan kontrol dan putar otomatis atribut tidak perlu disetel dengan nilai apa pun. Saya juga menyertakan a poster atribut yang memuat gambar di pemutar video sebelum streaming. Ini adalah pratinjau umum dengan banyak pemain web.
Kami menawarkan format MP4 dan WebM internal ke elemen video. Jika tidak satu pun dari ini dapat dimuat maka kami menampilkan kesalahan bagi pengguna untuk memperbarui browser mereka.
4. Menawarkan Flashbackback
Contoh di atas sempurna untuk semua browser web yang memenuhi standar. Namun kita juga perlu mempertimbangkan bahwa dunia tidak selalu berada di ujung tombak teknologi. Kami perlu mendukung pengguna di versi Safari yang lebih lama, Mozilla Firefox, dan khususnya Internet Explorer.
Cara terbaik untuk mencapai ini adalah melalui pemutar fallback Flash. Ini dapat ditambahkan menggunakan menanamkan atau obyek tag untuk referensi file .swf pihak ketiga. JW Player dan Flowplayer adalah dua solusi open source gratis yang dapat Anda pertimbangkan. Tetapi juga periksa pemutar video premium di ActiveDen yang bisa semurah $ 15 - $ 20.
Sekarang mari kita ubah kode di atas untuk memasukkan pemutar Flash cadangan untuk mendukung hampir setiap browser yang ada.
5. Dukungan Perangkat Seluler
Topik ini masih sangat diperdebatkan karena industri seluler masih sangat muda. Apple keluar dengan dukungan untuk MP4 di perangkat Mac dan iOS. Ini berarti Anda dapat melakukan streaming file video .mp4 secara asli di iPad, iPhone, atau iPod Touch di UI video standar. Ini mencakup banyak pangsa pasar.
Baru-baru ini perangkat Android mengalami kesulitan untuk mencapai tingkat dukungan yang sama. Namun Google akhirnya mengadopsi streaming web .mp4 yang sekarang memanfaatkan hampir semua pengguna ponsel. Dan karena Flash bukan pilihan di sini MP4 adalah solusi terbaik yang tersedia. Inilah mengapa Anda ingin menyematkan kode .mp4 terlebih dahulu agar perangkat iOS dapat mengenali file dengan segera.
6. Agen Pengguna Safari
Satu bug yang harus disebutkan adalah salah satu yang ada antara pemutar Flash dan streaming HTML5 .mp4 asli di Safari. Karena browser dapat mendukung kedua file, Anda mungkin kesulitan mendapatkan aliran video HTML5 sebagai pengganti Flash. Namun berkat posting blog yang luar biasa ini di TUAW, mudah untuk mengubah agen pengguna penelusuran Anda.
Ini akan memaksa halaman web Anda untuk mengenali browser sebagai berjalan di perangkat lain. Kemungkinan besar Anda akan memilih iPad, yang TIDAK mendukung pemutaran Flash. Ini adalah satu-satunya masalah utama yang mungkin Anda hadapi ketika menguji metode pemutaran MP4 asli & flash.
7. Kelola Kontrol Player
Percaya atau tidak ada juga metode yang dapat Anda gunakan untuk memanipulasi kontrol pemutar video HTML5. Itu semua bisa dilakukan dalam JavaScript dengan menarik dari serangkaian metode terbuka. Ada terlalu banyak untuk dicantumkan di sini, tetapi cobalah membaca dokumen elemen media W3C untuk lebih jelasnya.
Untuk memberi Anda ide umum, blog Opera dev telah memposting beberapa tutorial singkat yang bagus untuk pemula. Bahkan jika Anda belum pernah mengambil JavaScript atau jQuery sebelumnya, masih mudah untuk mulai menjalankannya dengan yang satu ini. Anda dapat memanggil atribut spesifik dari media video seperti diredam atau waktu saat ini. Kemudian Anda dapat melakukan tindakan (meredupkan latar belakang, menampilkan iklan) berdasarkan kriteria ini dengan memanipulasi DOM di jQuery.
Pengembang yang sama dalam artikel Opera menyediakan demo kerja dari pemutar video skrip mereka. Kesempatan untuk menyesuaikan kontrol UI Anda sendiri sangat luar biasa. Itu hanya menunjukkan betapa kuatnya video HTML5 menjadi.
8. Konversi Format Video
Ini adalah masalah besar lainnya yang kemungkinan akan membingungkan individu yang kurang paham teknologi. Anda hanya ingin membuat situs web Anda dan streaming dan sekarang Anda harus berurusan dengan mengkonversi video? Sebenarnya tidak terlalu sulit.
Untuk menangani MP4 yang merupakan prioritas terbesar Anda, Anda dapat menggunakan HandBrake yang merupakan solusi open source gratis yang berjalan pada ketiga OS utama. Ini akan mendukung H.264 bersama dengan beberapa codec lain yang menjadikan ini pilihan terbaik bagi pengguna freebie. Jika Anda memiliki uang untuk keluar saya harus merekomendasikan Xilisoft converter yang ada di Mac App Store hanya dengan lisensi seumur hidup $ 40.
Sepertinya rute WebM membuat hidup jauh lebih mudah. Miro Video Converter adalah alat gratis untuk Windows dan OS X yang menghasilkan file WebM berkualitas tinggi. Dapat juga melakukan encoding Ogg Theora yang keluar dengan kualitas yang cukup bagus juga.
9. Membangun Pemutar Web
Format video dengan spesifikasi HTML5 masih baru bagi pengembang. Ada protokol terbuka yang hanya menunggu untuk dimainkan untuk memungkinkan kontrol khusus, slider, ikon play / pause, dll. Jika Anda merasa berani, lihat tutorial ini tentang cara membuat pemutar HTML5 Anda sendiri (diterbitkan pada Splashnology).
Kode ini sedikit intens untuk pendatang baru karena membutuhkan penargetan CSS tingkat lanjut dan sedikit jQuery formal. Ada kerangka kerja lain yang bisa Anda bangun yang sudah menawarkan desain pemain yang disesuaikan. Demikian pula presentasi slideshare ini merupakan pengantar yang bagus untuk membangun pemutar video HTML5.
Membangun Pemutar Video HTML510. Perpustakaan VideoJS
VideoJS mungkin solusi favorit saya untuk pemutar video HTML5. Yang Anda perlukan hanyalah JavaScript mereka sendiri dan stylesheet CSS termasuk di suatu tempat dalam dokumen Anda. Kemudian Anda menulis kode video HTML5 standar dengan beberapa kelas tambahan untuk menguliti. Saya menambahkan kode sampel mereka di bawah ini:
Jika Anda menjalankan blog WordPress Anda juga dapat mencoba plugin WP kustom mereka. Ini akan secara otomatis menyertakan pustaka js / css pada halaman tempat Anda menampilkan video HTML5. Dan Anda dapat melakukan ini dari dalam setiap posting atau editor halaman menggunakan kode pendek (lihat di sini).
Kesimpulan
Saya harap panduan pengantar ini dapat membangkitkan minat Anda pada masa depan video web. Dengan semakin banyak pengguna yang beralih ke seluler, penting agar standar HTML5 diadopsi untuk jenis media ini. Web harus dibuat lebih sederhana sehingga pengembang dapat menghasilkan solusi yang didukung sepenuhnya lebih cepat. Kami akan senang mendengar ide dan saran Anda untuk masa depan video HTML5. Jika Anda ingin berbagi, silakan tinggalkan komentar di area diskusi pos di bawah ini.
