Membenamkan audio dan video dalam html5 menggunakan <audio></audio> dan <video></video> elemen

Unsur -unsur <audio></audio> dan <video></video> dalam HTML5 memberikan cara yang mudah untuk membenamkan kandungan audio dan video ke laman web anda. Struktur asas adalah mudah. Untuk audio, anda menggunakan tag <audio></audio> dan tentukan sumber menggunakan tag <source></source> , yang membolehkan anda menyediakan pelbagai sumber untuk keserasian penyemak imbas yang berbeza. Untuk video, anda menggunakan tag <video></video> sama. Berikut adalah contoh:

Contoh audio:

 <code class="html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio></code>

Kod ini cuba bermain audio.mp3 Pertama. Jika penyemak imbas tidak menyokong MP3, ia cuba audio.ogg . Jika tidak disokong, teks sandaran dipaparkan.

Contoh video:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </source></source></video></code>

Contoh ini juga cuba memainkan video.mp4 kemudian video.webm , dengan mesej sandaran jika tidak disokong. Atribut width dan height menetapkan dimensi awal. Atribut controls menambah kawalan main balik lalai.

Atribut dan kaedah biasa <audio></audio> dan <video></video> elemen

Kedua -dua <audio></audio> dan <video></video> elemen berkongsi banyak atribut dan kaedah biasa. Berikut adalah beberapa yang penting:

Atribut:

• src : Menentukan URL fail media.
• controls : Menambah kawalan main balik lalai (main, jeda, kelantangan, dll.).
• autoplay : Secara automatik memulakan main balik apabila halaman dimuat. (Selalunya autoplay dihadkan oleh penyemak imbas untuk pengalaman pengguna.)
• loop : Memainkan media berulang kali.
• muted : Memulakan main balik.
• preload : Petunjuk kepada penyemak imbas Bagaimana untuk memuatkan media (misalnya, auto , metadata , none ).
• poster : (video sahaja) Menentukan imej untuk dipaparkan sebelum main balik bermula.
• width dan height : Tetapkan dimensi pemain video.

Kaedah:

• play() : Memulakan main balik.
• pause() : Jeda main balik.
• currentTime : Mendapat atau menetapkan masa main balik semasa.
• volume : Mendapat atau menetapkan kelantangan (0.0 hingga 1.0).
• muted : Mendapat atau menetapkan keadaan yang diredam.

Atribut dan kaedah ini membolehkan kawalan yang signifikan terhadap pengalaman main balik media. Ingatlah untuk mengendalikan kesilapan yang berpotensi menggunakan pendengar acara (contohnya, peristiwa error ).

Mengendalikan masalah keserasian penyemak imbas yang berbeza

Keserasian penyemak imbas adalah aspek penting dalam membenamkan audio dan video. Pelayar yang berbeza menyokong codec yang berbeza (kaedah pengekodan data media). Untuk menangani ini:

• Menyediakan pelbagai sumber: Seperti yang ditunjukkan dalam contoh -contoh di atas, gunakan elemen <source></source> untuk menyediakan pelbagai sumber media dengan codec yang berbeza (misalnya, MP4, Webm, OGG). Ini memastikan pelayar dapat mencari format yang serasi.
• Gunakan perpustakaan JavaScript: perpustakaan seperti Howler.js (untuk audio) boleh abstrak beberapa kerumitan khusus pelayar, menyediakan API yang konsisten di seluruh pelayar yang berbeza.
• Kandungan Fallback: Sentiasa berikan kandungan sandaran (seperti mesej teks dalam contoh) untuk penyemak imbas yang tidak menyokong elemen <audio></audio> atau <video></video> atau codec yang ditentukan.
• Modernizr: Perpustakaan JavaScript seperti Modernizr dapat mengesan keupayaan pelayar dan membolehkan anda melayani kandungan yang berbeza berdasarkan sokongan penyemak imbas.

Dengan melaksanakan strategi ini, anda dapat meningkatkan kemungkinan bahawa kandungan audio dan video anda akan dimainkan dengan betul merentasi pelbagai pelayar.

Memastikan reka bentuk responsif untuk audio dan video tertanam

Reka bentuk responsif memastikan media anda menyesuaikan diri dengan saiz skrin yang berbeza. Inilah cara untuk mencapai ini:

• Gunakan dimensi berasaskan peratusan: Daripada atribut width dan height tetap, gunakan peratusan. Ini membolehkan pemain video skala secara proporsional dengan saiz skrin. Contohnya: <video width="100%" height="auto" controls></video> .
• Gaya CSS: Gunakan CSS untuk mengawal susun atur dan respons. Anda boleh menggunakan pertanyaan media untuk menyesuaikan saiz dan penempatan pemain media berdasarkan saiz skrin.
• Elemen kontena: Balut elemen <audio></audio> atau <video></video> dalam elemen kontena (misalnya, A <div> ) dan gaya bekas untuk memastikan ia bertindak balas dengan sewajarnya. Ini memberi anda kawalan yang lebih baik ke atas susun atur keseluruhan.<li> <strong>Nisbah Aspek:</strong> Mengekalkan nisbah aspek yang betul dari video anda untuk mengelakkan herotan. Anda boleh menggunakan padding CSS atau teknik lain untuk mencapai matlamat ini. Sebagai contoh, menggunakan padding-bottom dengan peratusan yang dikira berdasarkan nisbah aspek.</li> <p> Dengan menggabungkan teknik -teknik ini, kandungan audio dan video tertanam anda akan menyesuaikan dengan lancar ke peranti dan saiz skrin yang berbeza, memberikan pengalaman pengguna yang konsisten di semua platform.</p> </div>

Atas ialah kandungan terperinci Bagaimana saya membenamkan audio dan video dalam html5 menggunakan & lt; audio & gt;?dan & lt; video & gt;?unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!