HTML5 Video dan Audio: The Markup - SitePoint

Penjelasan terperinci mengenai HTML5 Video dan Audio Tags: Membina pemain video responsif

Artikel ini dikutip dari buku "HTML5 & CSS3 untuk dunia nyata, edisi ke-2" yang dikarang oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl. Buku ini boleh didapati di kedai buku utama di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.

mata teras

• Tag video dan audio HTML5 membolehkan video tertanam dan elemen audio secara langsung dalam kod HTML, tanpa memerlukan pemalam luaran atau pemain.
• tag video dan audio HTML5 mengandungi pelbagai atribut untuk mengawal tingkah laku unsur -unsur ini, seperti autoplay, kawalan, gelung, diredam, dan sumber.
• "Fail video HTML5 tidak dijumpai" ralat biasanya berlaku apabila penyemak imbas tidak dapat mencari atau mengakses fail video yang ditentukan dalam harta sumber tag video.
• HTML5 sendiri tidak menyediakan fungsi anotasi terbina dalam video, tetapi boleh membuat anotasi tersuai menggunakan JavaScript dan CSS.
• Dengan memasukkan beberapa tag sumber dalam tag video, pelbagai sumber boleh ditentukan untuk video HTML5, dengan itu memaksimumkan keserasian dengan pelayar yang berbeza.

tags

Selepas berurusan dengan isu kontena, codec dan pelesenan, mari kita mengkaji tanda -tanda elemen video dan atribut yang berkaitan.

Cara paling mudah untuk memasukkan video HTML5 dalam laman web adalah seperti berikut:

<video src="example.webm"></video>

Seperti yang disebutkan dalam bahagian sebelumnya, ini hanya berfungsi dalam pelayar terhad. Walau bagaimanapun, ini adalah kod terkecil untuk membuat video HTML5 berfungsi sedikit sebanyak. Di dunia yang ideal, ia harus berfungsi di mana -mana sahaja -seperti elemen IMG -tetapi ia akan mengambil sedikit masa.

Sama dengan elemen IMG, elemen video juga boleh mengandungi atribut lebar dan ketinggian:

<video height="280" src="example.webm" width="375"></video>

Walaupun saiz boleh ditetapkan dalam penanda, ini tidak menjejaskan nisbah aspek video. Sebagai contoh, jika video dalam contoh terdahulu sebenarnya 375 × 240 dan penandaan ditunjukkan, video itu akan berpusat secara menegak dalam ruang 280 piksel yang ditentukan. Ini menghalang video daripada menjadi overstretched dan muncul diputarbelitkan.

Atribut lebar dan ketinggian hanya menerima bilangan bulat, dan nilai mereka sentiasa piksel. Sudah tentu, nilai -nilai ini boleh ditimpa oleh skrip atau CSS.

Dayakan kawalan asli

Mana -mana video tertanam adalah sangat diperlukan untuk membolehkan pengguna bermain, jeda, berhenti, cepat ke hadapan dan ke belakang, atau menyesuaikan kelantangan. Elemen video html5 mengandungi atribut kawalan yang boleh melakukan ini:

<video src="example.webm" width="375" height="280" controls></video>

Kawalan adalah harta boolean, jadi tiada nilai diperlukan. Kemasukannya dalam tag memberitahu penyemak imbas untuk membuat kawalan dapat dilihat dan dapat diakses oleh pengguna.

Setiap penyemak imbas bertanggungjawab untuk kemunculan kawalan video terbina dalam. Rajah 5.1 dan Rajah 5.2 menunjukkan perbezaan penampilan kawalan ini di seluruh pelayar.

Rajah 5.1.

Rajah 5.2.

Rajah 5.3.

Rajah 5.4.

atribut autoplay

Kami ingin mengabaikan harta ini kerana ia tidak diingini dalam kebanyakan kes; Atribut Autoplay Boolean sepenuhnya sepadan dengan makna namanya: ia memberitahu laman web untuk memainkan video secepat mungkin.

Biasanya ini adalah amalan yang buruk; Amalan Terbaik Kegunaan Menetapkan bahawa bunyi dan pergerakan di laman web hanya boleh dicetuskan apabila diminta oleh pengguna. Tetapi itu tidak bermakna bahawa atribut autoplay tidak boleh digunakan.

Contohnya, jika halaman yang berkaitan hanya mengandungi satu video - iaitu, pengguna mengklik pautan ke halaman hanya untuk menonton video tertentu - maka ia boleh dimainkan secara automatik, bergantung pada saiz video, kandungan sekitarnya , Melihat platform dan penonton.

Berikut adalah cara menggunakan harta ini:

Amaran: Penyemak imbas mudah alih mengabaikan autoplay

Banyak (jika tidak semua) pelayar mudah alih mengabaikan atribut Autoplay, jadi video akan selalu dimainkan selepas pengguna menekan butang main. Ini adalah munasabah memandangkan jalur lebar mudah alih biasanya terhad dan mahal.

atribut gelung

<video src="example.webm"></video>

Satu lagi harta yang ada yang harus difikirkan dua kali sebelum menggunakan adalah harta Boolean Loop. Sekali lagi, mudah difahami: Menurut spesifikasi, harta ini akan memberitahu penyemak imbas untuk "kembali ke permulaan sumber apabila ia mencapai akhir sumber".

jadi jika anda membuat laman web, yang satu -satunya tujuannya adalah bosan dengan pelawat, ia mungkin mengandungi kod berikut:

bermain auto dan gelung tak terhingga! Kami hanya perlu mengeluarkan kawalan asli dan kami boleh mendapatkan trio amalan terburuk.

Sudah tentu, seperti autoplay, gelung juga berguna dalam beberapa kes: contohnya, dalam permainan berasaskan pelayar, bunyi ambien dan muzik harus dimainkan secara berterusan apabila halaman dibuka.

Preload Property

<video height="280" src="example.webm" width="375"></video>

Berbanding dengan kedua -dua sifat yang dibincangkan sebelum ini, harta preload sangat mudah dalam banyak kes. Harta Preload menerima salah satu daripada tiga nilai:

• Auto: Menunjukkan bahawa video dan metadata yang berkaitan akan mula dimuat sebelum video dimainkan. Dengan cara ini, penyemak imbas boleh mula bermain video lebih cepat apabila pengguna memintanya.
• Tiada: bermaksud bahawa video tidak boleh dimuatkan di latar belakang sebelum pengguna menekan butang main.
• Metadata: Sama seperti tiada, tetapi walaupun video itu sendiri tidak dimuatkan, mana -mana metadata yang berkaitan dengan video (mis., Saiz, tempoh, dll) boleh dimuatkan.

Property Preload tidak mempunyai nilai lalai yang ditetapkan apabila ditinggalkan; Ini masuk akal kerana ia membolehkan video dan/atau metadata secara automatik dimuatkan pada penyemak imbas desktop yang disambungkan dengan baik tanpa sebarang kesan buruk yang sebenar; Pilih sama ada untuk memuat turun video.

atribut poster

Apabila anda cuba menonton video di web, satu bingkai video biasanya dipaparkan untuk menyediakan treler kandungannya. Atribut poster memudahkan untuk memilih treler tersebut. Harta ini sama dengan SRC dan akan menunjuk kepada fail imej pada pelayan melalui URL.

Berikut adalah elemen video dengan atribut poster:

<video src="example.webm"></video>

Jika atribut poster ditinggalkan, "poster" lalai akan menjadi bingkai pertama video, yang akan dipaparkan dengan segera selepas dimuatkan.

Atribut yang disenyapkan

Atribut yang disenyapkan (jenis boolean) mengawal keadaan lalai trek audio elemen video.

Menambah harta ini akan menyebabkan trek audio video disedut secara lalai, yang boleh menimpa mana -mana keutamaan pengguna. Ini hanya mengawal keadaan lalai elemen - yang boleh diubah oleh pengguna berinteraksi dengan kawalan atau JavaScript.

tambahkan ke elemen video kami:

<video height="280" src="example.webm" width="375"></video>

Dalam versi spesifikasi HTML5 sebelumnya, terdapat harta yang bernama Audio, yang mengambil nilai yang diredam. Harta baru yang disenyapkan menggantikan harta audio yang sudah lapuk sekarang.

Tambahkan sokongan untuk pelbagai format video

Seperti yang kita bincangkan, pada masa ini tidak ada cara untuk menggunakan format kontena tunggal untuk menyampaikan video anda, walaupun ini memang falsafah di sebalik elemen video dan apa yang kami harapkan untuk dicapai dalam masa terdekat. Untuk memasukkan pelbagai format video, elemen video membolehkan definisi elemen sumber supaya anda boleh membenarkan setiap pelayar memaparkan video dalam format yang dipilih. Unsur -unsur ini mempunyai fungsi yang sama seperti atribut SRC pada elemen video, jadi jika anda menyediakan elemen sumber, anda tidak perlu menentukan SRC untuk elemen video.

Untuk mencapai sokongan penyemak imbas penuh, inilah cara mengisytiharkan elemen sumber:

<video src="example.webm" width="375" height="280" controls></video>

Elemen sumber

(pelik) mempunyai atribut SRC yang menentukan lokasi fail video. Ia juga menerima atribut jenis yang menentukan format kontena sumber yang diminta. Harta berikutnya ini membolehkan penyemak imbas untuk menentukan sama ada ia boleh memainkan fail yang berkaitan, dengan itu menghalangnya daripada tidak perlu memuat turun format yang tidak disokong.

Atribut jenis

juga membolehkan menentukan parameter codec yang menentukan codec video dan audio untuk fail yang diminta. Berikut adalah elemen sumber dengan codec yang ditentukan:

<video src="example.webm"></video>

Anda akan melihat bahawa sintaks atribut jenis telah sedikit diubah suai agar sesuai dengan nilai bekas dan codec. Petikan berganda yang digunakan di sekitar nilai telah ditukar kepada petikan tunggal, dan satu lagi petikan ganda bersarang digunakan secara khusus dalam codec.

Ini mungkin agak mengelirukan pada pandangan pertama, tetapi dalam kebanyakan kes, sebaik sahaja anda mempunyai satu set cara untuk menyandikan video anda (yang akan dibincangkan kemudian dalam bab ini), anda hanya menyalin dan menampal nilai -nilai. Adalah penting bahawa anda menentukan nilai yang betul untuk fail yang ditentukan untuk memastikan penyemak imbas boleh menentukan fail yang boleh dimainkan (jika ada) yang boleh dimainkan.

Nota: Format apa yang anda perlukan?

Bergantung pada penonton sasaran laman web anda, anda mungkin tidak memerlukan tiga elemen sumber untuk mendapatkan sokongan penyemak imbas penuh. Sokongan untuk codec video dan audio dan bekas adalah hebat, anda hanya memerlukan satu atau dua kombinasi. Untuk membantu anda menentukan format yang hendak digunakan, pastikan anda menyemak maklumat sokongan penyemak imbas terkini yang boleh saya gunakan.

Pesanan Sumber

Tiga elemen sumber diletakkan sebagai elemen kanak -kanak elemen video, dan penyemak imbas yang digunakan akan memilih mana -mana format bekas/codec yang diiktiraf - hanya memuat turun sumber yang diperlukan dan mengabaikan sumber lain. Setelah mengisytiharkan tiga format fail, kod kami kini kelihatan seperti ini:

<video height="280" src="example.webm" width="375"></video>

Anda akan melihat bahawa kod kami sekarang tidak mempunyai atribut SRC pada elemen video. Seperti yang dinyatakan sebelum ini, termasuk ia sebagai tambahan kepada redundansi juga akan menimpa sebarang fail video yang ditakrifkan dalam elemen sumber, jadi ia mesti ditinggalkan dalam kes ini.

Apa yang harus saya lakukan jika penyemak imbas yang tidak menyokong video HTML5?

tiga elemen sumber yang termasuk dalam elemen video kami akan meliputi semua pelayar moden, tetapi kami belum memastikan bahawa video kami akan dimainkan di pelayar yang lebih tua. Seperti yang dinyatakan sebelum ini, anda mungkin masih mempunyai banyak pengguna menggunakan pelayar yang tidak menyokong video HTML5. Kebanyakan pengguna ini berada pada versi tertentu sebelum Internet Explorer 9.

Untuk mengekalkan prinsip penurunan yang elegan, elemen video direka supaya pelayar yang lebih tua dapat mengakses video dengan cara lain. Mana -mana penyemak imbas yang tidak mengiktiraf elemen video hanya akan mengabaikannya dan unsur -unsur anaknya. Walau bagaimanapun, jika elemen video mengandungi kandungan yang diiktiraf sebagai penyemak imbas sebagai HTML yang sah, ia akan membaca dan memaparkan kandungan.

Apa yang boleh kita sediakan untuk pelayar yang tidak disokong? Menurut Adobe, lebih daripada 1 bilion pengguna desktop telah memasang plugin Flash Player pada sistem mereka. Dan kebanyakan contoh pemalam flash ini adalah versi 9 atau lebih tinggi, dan mereka menyokong format kontena video MPEG-4. Dengan ini, untuk membolehkan Internet Explorer 8 dan lebih awal (dan penyemak imbas yang lebih tua yang tidak menyokong video HTML5) untuk memainkan video kami, kami boleh mengisytiharkan video flash tertanam sebagai sandaran. Berikut adalah kod lengkap untuk video pada html5 herald , yang mengandungi kod sandaran flash:

<video src="example.webm" width="375" height="280" controls></video>

Kami akan melangkaui terperinci bagaimana kod yang baru ditambah ini berfungsi (ini bukan buku mengenai flash selepas semua!), Tetapi berikut adalah beberapa perkara yang perlu diperhatikan tentang menambah tag ini:

• Atribut lebar dan ketinggian pada elemen objek harus sama seperti yang ada pada elemen video.
• Untuk memainkan fail, kami menggunakan pemain terbuka Longtail Video JW, yang percuma untuk kegunaan bukan komersial, tetapi anda boleh menggunakan mana-mana pemain video yang anda suka.
• Kod video Flash mempunyai sandaran sendiri - jika kod video Flash tidak berfungsi, fail imej dipaparkan.
• Elemen param keempat mentakrifkan fail yang akan digunakan (contoh.mp4). Seperti yang dinyatakan sebelum ini, kebanyakan contoh Pemain Flash kini menyokong bermain video menggunakan format kontena MPEG-4, jadi tidak perlu mengodkan format video lain.
• HTM5 membolehkan penyemak imbas yang menyokong video HTML5 akan mengabaikan sebarang kandungan dalam elemen video yang bukan tag sumber seperti yang ditentukan oleh spesifikasi, jadi sandaran adalah selamat dalam semua penyemak imbas.

Sebagai tambahan kepada kandungan sandaran flash, anda juga boleh menyediakan pautan video muat turun pilihan yang membolehkan pengguna mengakses salinan video tempatan dan menontonnya apabila mereka bebas. Ini akan memastikan bahawa tiada siapa yang tidak dapat menonton video.

Titik terakhir yang disebutkan di sini ialah, seperti elemen sumber tambahan, laman web anda mungkin tidak mempunyai pelawat dari pelayar video HTML5 yang tidak disokong, atau anda mungkin tidak peduli dengan sebilangan kecil pengguna menggunakan pelayar yang lebih tua. Dalam kedua -dua kes, anda boleh menghilangkan kandungan sandaran Flash dengan mudah, dengan itu memudahkan kod.

Soalan Lazim untuk Tag Video dan Audio HTML5

Apakah tag video dan audio HTML5?

Tag video dan audio HTML5 adalah ciri yang diperkenalkan dalam HTML5 yang membolehkan anda membenamkan elemen video dan audio terus ke dalam kod HTML. Ini menghilangkan keperluan untuk pemalam atau pemain luaran, menyediakan pengguna dengan pengalaman multimedia yang lancar. Tag ini terdiri daripada tag <video></video> dan <audio></audio> dan beberapa sifat yang membolehkan anda mengawal tingkah laku unsur -unsur ini, seperti autoplay, kawalan, gelung, diredam, dan sumber.

Kenapa saya mendapat ralat "HTML5 Video File Not Found"?

"Fail video html5 tidak dijumpai" ralat biasanya berlaku apabila penyemak imbas tidak dapat mencari atau mengakses fail video yang ditentukan dalam harta sumber tag <video></video>. Ini boleh disebabkan oleh pelbagai sebab, seperti laluan fail yang salah, penghapusan fail, atau masalah pelayan. Pastikan laluan fail betul dan fail video boleh diakses untuk menyelesaikan ralat ini.

Bagaimana untuk menambah komen ke video HTML5 saya?

Menambah komen ke video HTML5 termasuk menambah teks, bentuk, atau elemen lain ke video untuk memberikan lebih banyak maklumat atau menyerlahkan bahagian -bahagian tertentu video. Walaupun HTML5 tidak menyediakan fungsi anotasi terbina dalam, anda boleh membuat anotasi tersuai menggunakan JavaScript dan CSS. Sebagai alternatif, anda boleh menggunakan alat dalam talian seperti Veed.io, yang menyediakan alat anotasi video yang mudah digunakan.

Bagaimana untuk menyelesaikan ralat "HTML5 Video File Not Found"?

Selesaikan ralat "HTML5 Video File Not Found" termasuk mengenal pasti punca kesilapan dan menyelesaikannya. Jika laluan fail tidak betul, betulkannya. Jika fail telah dipadam, pulihkan atau menggantikannya dengan fail baru. Sekiranya terdapat masalah pelayan, sila hubungi pentadbir pelayan atau penyedia hosting anda untuk mendapatkan bantuan. Dalam sesetengah kes, fail video mungkin rosak, di mana anda perlu membaiki atau menggantikan fail.

Mengapa video HTML5 saya tidak bermain di Firefox?

Jika video HTML5 anda tidak dimainkan di Firefox, ia mungkin disebabkan oleh pelbagai sebab. Firefox mungkin tidak menyokong format video yang ditentukan dalam atribut sumber tag <video></video>. Pelayar juga boleh menyekat video kerana tetapan keselamatan atau privasi. Semak format video dan tetapan penyemak imbas untuk menyelesaikan masalah ini.

Bagaimana untuk memperbaiki fail video HTML5 yang korup?

Membaiki fail video HTML5 yang rosak termasuk menggunakan alat pembaikan video. Alat ini menganalisis fail korup dan cuba menyelesaikan sebarang kesilapan atau isu yang menghalang fail daripada bermain dengan betul. Beberapa alat pembaikan video yang popular termasuk pembaikan video bintang dan pembaikan Wondershare.

Bagaimana untuk menambah kawalan dalam video HTML5 saya?

Anda boleh menambah kawalan untuk video HTML5 dengan memasukkan atribut kawalan dalam tag <video></video>. Harta ini menambah satu set kawalan lalai ke video, termasuk main/jeda, kelantangan, dan butang skrin penuh. Kawalan muncul apabila pengguna melayang di atas video.

bolehkah saya memainkan video html5 saya secara automatik?

Ya, anda boleh memainkan video HTML5 secara automatik dengan memasukkan atribut autoplay dalam tag <video></video>. Walau bagaimanapun, ingat bahawa banyak penyemak imbas menyekat secara automatik memainkan video dengan bunyi untuk mengelakkan gangguan dengan pengguna. Untuk memastikan video anda dimainkan secara automatik, pertimbangkan untuk disenyapkan dengan harta yang disenyapkan.

bagaimana untuk melengkapkan video html5 saya?

Anda boleh melengkung melalui video HTML5 dengan memasukkan atribut gelung dalam tag <video></video>. Harta ini menyebabkan video bermula dari awal selepas main balik, mewujudkan gelung yang berterusan.

Bolehkah saya memainkan pelbagai sumber dalam video html5?

Ya, anda boleh menentukan pelbagai sumber untuk video HTML5 dengan memasukkan tag pelbagai <video></video> dalam tag <source></source>. Penyemak imbas akan menggunakan sumber pertama yang boleh dimainkan. Ini membolehkan anda menyediakan pelbagai format video untuk penyemak imbas yang berbeza untuk keserasian maksimum.

Atas ialah kandungan terperinci HTML5 Video dan Audio: The Markup - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!