Dalam blog pertama untuk Pro PC , pembangun web Ian Devlin mendedahkan cara memasukkan video ke dalam laman web anda dengan HTML5
bolehkah anda mengikuti hashtag di twitter
Mungkin ciri HTML5 yang paling besar dan paling banyak dibincangkan adalah video terbenam. Pada masa ini, satu-satunya kaedah untuk menambahkan kandungan video ke laman web anda adalah dengan pemalam pihak ketiga seperti Flash, QuickTime atau RealPlayer. Dengan permulaan HTML5 dan elemen video, ini semua akan berubah, dengan sokongan video dikendalikan oleh penyemak imbas web, menghilangkan keperluan untuk sokongan pihak ketiga.
Beberapa penyemak imbas web sudah menawarkan sokongan untuk HTML5. Di sini kami akan mendedahkan bagaimana anda dapat memasukkan video bebas plugin ke laman web anda dan masalah yang akan anda hadapi.
Jenis fail dan keserasian penyemak imbas
Sebagai permulaan, kami akan melihat secara ringkas pelbagai jenis fail video yang disokong dalam HTML5. Ini adalah Theora OGG dan H.264 (.mp4). Pelayar yang berbeza menyokong pelbagai jenis, dan ada yang sama sekali tidak menyokong. Jadual berikut menunjukkan 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 teknikal lain
HTML5 itu sendiri tidak menentukan codec video yang akan digunakan, dan ini menimbulkan argumen mengenai mana yang terbaik untuk digunakan di web . Oleh itu, untuk merangkumi semua penyemak imbas, kita harus menyokong kedua-dua codec.
Dan tentu saja terdapat Internet Explorer. Pada masa ini, tidak ada versi Internet Explorer yang dikeluarkan yang menyokong elemen video dan pemalam masih diperlukan untuk memainkan video. Ini akan berubah dengan pembebasan Internet Explorer 9 (kemungkinan awal tahun depan), ketika H.264 akan disokong, bersama dengan banyak barang HTML5 yang lain.
Sekiranya anda tertanya-tanya bagaimana, anda boleh menukar fail video anda ke OGG (anda boleh membaca lebih lanjut mengenai Theora OGG jenis di Buku TheoraCook ) fail menggunakan Penukar Video Miro .
Untuk maklumat lebih mendalam mengenai elemen video dan codec, pergi ke selami html5: video di web oleh Mark Pilgrim.
Kod HTML5
Sekarang kita beralih ke kod HTML5 yang sebenarnya dan bagaimana kita dapat menyelesaikannya. HTML5 memberi kami dua elemen baru yang dapat kami gunakan untuk menambahkan video ke laman web kami: the elemen, yang telah kami sebutkan, dan unsur. Mari kita lihat masing-masing secara bergantian.
Unsur tersebut
Elemen video boleh mempunyai atribut berikut:
| Atribut | Penerangan |
|---|---|
| src | URL yang sah ke fail video itu sendiri |
| permainan automatik | boolean yang menunjukkan sama ada video harus dimainkan secara automatik |
| kawalan | boolean yang menunjukkan bahawa kawalan media lalai harus ditunjukkan oleh penyemak imbas |
| gelung | boolean yang menunjukkan sama ada video harus dimainkan berulang kali |
| pramuat | menunjukkan kepada penyemak imbas sama ada pra-pilihan memuat turun video itu sendiri diperlukan, atau jika metadata sahaja yang diperlukan. Nilai yang mungkin adalah:
|
| poster | URL ke fail gambar untuk dipaparkan apabila data video tidak tersedia |
| lebar | lebar video, dalam piksel CSS |
| ketinggian | ketinggian video, dalam piksel CSS |
Dari ini, dapat dilihat betapa mudahnya memasukkan video OGG ke laman web anda dengan menggunakan elemen video sahaja:
Itu sahaja yang ada.
Mana-mana penyemak imbas yang menyokong format Theora OGG kini harus berjaya memaparkan dan memainkan video anda tanpa basa-basi. Sudah tentu ia tidak semudah itu, kerana seperti yang kita lihat dari jadual di atas, kod tersebut hanya akan berfungsi di Firefox, Chrome dan Opera. Oleh itu, kita juga perlu mengalami penurunan pada H.264. Ini dapat dicapai dengan menggunakan elemen, yang membolehkan kita menentukan pelbagai sumber media untuk elemen video.
berhenti pengurusan memori kod tetingkap 10 memperbaiki
Unsur tersebut
Elemen sumber mempunyai atribut berikut:
| Atribut | Penerangan |
|---|---|
| src | URL yang sah ke media (dalam video ini) fail itu sendiri |
| menaip | jenis fail media yang mesti a Jenis MIME , mis. type='video/ogg' menunjukkan bahawa ia adalah video Theora OGG, dan anda juga dapat memberikan codec MIME untuk membantu penyemak imbas memutuskan cara memainkan video dengan menggunakan type='video/ogg; codecs='theora, vorbis'. |
| separuh | memberikan jenis sumber media yang dimaksudkan dan mestilah sah pertanyaan media , mis. media='handheld' menunjukkan bahawa video sesuai untuk peranti pegang tangan atau media='all and (min-device-height:720px)' yang menunjukkan bahawa video sesuai untuk skrin 720 piksel atau lebih. |
Catatan: bahawa elemen sumber tidak sah dan mempunyai tag permulaan tetapi tidak ada tag penutup
Perkara yang paling berguna mengenai elemen sumber adalah kita dapat menggunakannya untuk menumpuk pelbagai jenis fail, yang membolehkan penyemak imbas mencuba masing-masing secara bergantian sehingga ia dapat menemukannya.
Menggunakan dan bersama
Untuk menyusun video dalam pelbagai jenis dalam elemen video, kami memasukkan kodnya seperti berikut:
Your browser does not support the video element.
Kod di atas sekarang akan berfungsi di semua penyemak imbas kecuali Internet Explorer, yang akan memaparkan mesej yang ditunjukkan di atas.
Anda boleh mengujinya sendiri dengan melihat halaman Video Uji HTML5, yang mengandungi contoh video rama-rama dalam format Theora OGG dan MP4, jadi jika anda melihatnya dalam Firefox, Chrome, Safari, Opera atau di iPhone atau Telefon bimbit Android, anda seharusnya dapat melihatnya.
Pisau tajam di antara anda sekarang akan menyedari bahawa kita dapat memanfaatkan susunan ini dan mempunyai penggantian ke Flash (atau beberapa pemalam lain) di bahagian bawah, bukannya memaparkan maaf yang tidak dapat anda lihat pesan video ini, dengan menggunakan kod berikut :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Kesimpulannya
Seperti kebanyakan elemen HTML5, sokongan penyemak imbas untuk sumber dan elemen video pada masa ini tidak sesuai. Terdapat juga perdebatan besar yang sedang berlangsung pada masa ini sama ada elemen sumber akan membunuh penggunaan Flash sebagai kaedah yang paling popular untuk menambahkan kandungan video ke laman web. Saya tidak pasti ia akan mematikan Flash sepenuhnya, tetapi saya rasa wajar untuk mengatakan bahawa di sini untuk terus tinggal dan akan memberikan pembangun web pendekatan yang lebih bersih dan lebih mudah untuk menyematkan video.
