Di blog pertamanya untuk PC Pro , pengembang web Ian Devlin mengungkapkan cara menyematkan video ke situs web Anda dengan HTML5
cara menginstal minecraft forge di mac
Mungkin fitur HTML5 terbesar dan paling banyak dibicarakan adalah video yang disematkan. Saat ini, satu-satunya metode untuk menambahkan konten video ke situs web Anda adalah dengan plugin pihak ketiga seperti Flash, QuickTime atau RealPlayer. Dengan munculnya HTML5 dan elemen video, semua ini akan berubah, dengan dukungan video yang ditangani oleh browser web, menghilangkan kebutuhan akan dukungan pihak ketiga.
Beberapa browser web sudah menawarkan dukungan untuk HTML5. Di sini kami akan mengungkapkan bagaimana Anda dapat menyematkan video bebas plugin ke situs Anda dan masalah yang akan Anda hadapi.
Jenis file dan kompatibilitas browser
Untuk memulainya, kita akan melihat secara singkat berbagai jenis file video yang didukung di HTML5. Ini adalah Theora OGG dan H.264 (.mp4). Peramban yang berbeda mendukung jenis yang berbeda, dan beberapa tidak mendukung sama sekali. Tabel berikut menunjukkan hal ini:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Codec dan masalah teknis lainnya
HTML5 sendiri tidak menentukan codec video yang akan digunakan , dan ini telah menimbulkan argumen tentang yang yang terbaik untuk digunakan untuk web . Jadi untuk mencakup semua browser, kita harus mendukung kedua codec.
Dan tentu saja ada Internet Explorer. Saat ini, tidak ada versi Internet Explorer yang dirilis yang mendukung elemen video dan plugin masih diperlukan untuk memutar video. Ini akan berubah dengan rilis Internet Explorer 9 (kemungkinan awal tahun depan), ketika H.264 akan didukung, bersama dengan banyak barang HTML5 lainnya.
Jika Anda bertanya-tanya bagaimana caranya, Anda dapat mengonversi file video Anda ke OGG (Anda dapat membaca lebih lanjut tentang jenis Theora OGG di TheoraBuku Masak ) file menggunakan Konverter Video Miro .
Untuk informasi mendalam lebih lanjut tentang elemen video dan codec, kunjungi selami html5: video di web oleh Mark Pilgrim.
kode HTML5
Sekarang kita beralih ke kode HTML5 yang sebenarnya dan bagaimana kita bisa membuatnya bekerja. HTML5 memberi kita dua elemen baru yang dapat kita gunakan untuk menambahkan video ke halaman web kita: |_+_| elemen, yang telah kami sebutkan, dan |_+_| elemen. Mari kita lihat masing-masing secara bergantian.
Elemen
Elemen video dapat memiliki atribut berikut:
| Atribut | Deskripsi |
|---|---|
| src | URL yang valid ke file video itu sendiri |
| putar otomatis | boolean yang menunjukkan apakah video harus diputar secara otomatis |
| kontrol | boolean yang menunjukkan bahwa kontrol media default harus ditampilkan oleh browser |
| lingkaran | boolean yang menunjukkan apakah video harus diputar berulang kali |
| pramuat | menunjukkan kepada browser apakah pengunduhan pre-emptive dari video itu sendiri diperlukan, atau hanya metadata saja yang diperlukan. Nilai yang mungkin adalah:
|
| poster | URL ke file gambar yang akan ditampilkan saat tidak ada data video yang tersedia |
| lebar | lebar video, dalam piksel CSS |
| tinggi | tinggi video, dalam piksel CSS |
Dari sini, dapat dilihat betapa mudahnya menyematkan video OGG ke situs web Anda menggunakan elemen video saja:
Itu benar-benar semua yang ada untuk itu.
Peramban apa pun yang mendukung format Theora OGG sekarang akan berhasil menampilkan dan memutar video Anda tanpa basa-basi lagi. Tentu tidak semudah itu, karena seperti yang telah kita lihat dari tabel di atas, kode tersebut hanya akan bekerja di Firefox, Chrome dan Opera. Jadi kita perlu memiliki fallback ke H.264 juga. Ini dapat dicapai dengan menggunakan |_+_| elemen, yang memungkinkan kita untuk menentukan beberapa sumber media untuk elemen video.
cara membuka blokir seseorang di venmo
Elemen
Elemen sumber memiliki atribut berikut:
| Atribut | Deskripsi |
|---|---|
| src | URL yang valid ke file media (dalam hal ini video) itu sendiri |
| Tipe | jenis file media yang harus berupa tipe MIME , misalnya |_+_| menunjukkan bahwa ini adalah video Theora OGG, dan Anda juga dapat menyediakan codec MIME untuk membantu browser memutuskan cara memutar video dengan menggunakan |_+_|. |
| setengah | memberikan jenis media yang dimaksud dari sumber daya media dan harus valid kueri media , misalnya |_+_| menunjukkan bahwa video cocok untuk perangkat genggam atau |_+_| yang menunjukkan bahwa video sesuai untuk layar 720 piksel atau lebih. |
Catatan: bahwa elemen sumber tidak berlaku dan memiliki tag awal tetapi tidak ada tag penutup
Hal yang paling berguna tentang elemen sumber adalah bahwa kita dapat menggunakannya untuk menumpuk jenis file yang berbeda, memungkinkan browser untuk mencoba masing-masing secara bergantian sampai menemukan satu yang dapat dimainkan.
Menggunakan dan bersama-sama
Untuk menumpuk video dalam berbagai jenis di dalam elemen video, kami memasukkan kode sebagai berikut:
Kode di atas sekarang akan berfungsi di semua browser kecuali Internet Explorer, yang akan menampilkan pesan yang ditunjukkan di atas.
Anda dapat mengujinya sendiri dengan melihat halaman Video Uji HTML5 , yang berisi contoh video kupu-kupu dalam format Theora OGG dan MP4, jadi jika Anda melihatnya di Firefox, Chrome, Safari, Opera atau di iPhone atau Handset Android, Anda harus dapat melihatnya.
Pisau tajam di antara Anda sekarang akan melihat bahwa kami dapat memanfaatkan penumpukan ini dan memiliki cadangan ke Flash (atau plugin lain) di bagian bawah alih-alih menampilkan pesan maaf Anda tidak dapat melihat pesan video ini, dengan menggunakan kode berikut :
Kesimpulan
Seperti kebanyakan elemen HTML5, dukungan browser untuk elemen sumber dan video saat ini tidak merata. Ada juga perdebatan besar yang terjadi saat ini, apakah elemen sumber akan mematikan penggunaan Flash sebagai metode paling populer untuk menambahkan konten video ke situs web. Saya tidak yakin itu akan mematikan Flash sepenuhnya, tetapi saya pikir adil untuk mengatakan bahwa itu akan tetap ada dan akan memberi pengembang web pendekatan yang lebih bersih dan lebih mudah untuk menyematkan video.
