HTML5 menyediakan keupayaan penyembuhan audio dan video yang mudah tanpa pemalam pihak ketiga. 1. Gunakan tag untuk bermain audio secara langsung. Adalah disyorkan untuk menyediakan format MP3, WAV, dan OGG untuk meningkatkan keserasian; 2. Apabila membenamkan video dengan tag , adalah disyorkan untuk memilih format MP4 dan WebM, dan memberi perhatian kepada kesan saiz fail pada kelajuan pemuatan; 3. Main balik automatik memerlukan atribut yang disenyapkan untuk mengelakkan dipintas oleh penyemak imbas; 4. Preload boleh digunakan untuk mengawal pramuat, poster dan pengalaman pengoptimuman lain. Berikutan kaedah di atas memastikan operasi yang stabil dalam pelayar moden.

Menambah kandungan audio dan video ke laman web, HTML5 menyediakan tag dan ciri yang sangat mudah. Anda tidak perlu bergantung pada plugin pihak ketiga, seperti Flash, untuk membenamkan audio dan video secara langsung. Ini bukan sahaja meningkatkan keserasian, tetapi juga memudahkan proses pembangunan.

Audio enmbed menggunakan tag <audio></audio>

Tag <audio></audio> HTML5 membolehkan anda memainkan fail audio dengan mudah di laman web. Kaedah penggunaan biasa adalah seperti berikut:

 <audio src = "muzik.mp3" kawalan> </audio>

• src Menentukan laluan fail audio.
• controls bermaksud memaparkan bar kawalan penyemak imbas sendiri (bermain, jeda, kelantangan, dll.).
• Format yang disokong termasuk MP3, WAV, OGG, dll.

Jika anda ingin bersesuaian dengan lebih banyak penyemak imbas, anda boleh menyediakan pelbagai format:

 <Kawalan Audio>
  <source src = "muzik.mp3" type = "audio/mpeg">
  <Source src = "Music.ogg" type = "Audio/Ogg">
  Penyemak imbas anda tidak menyokong main balik audio.
</audio>

Cadangan: Cuba menyediakan pelbagai format untuk memastikan semua pengguna boleh bermain secara normal.

Enmbed video menggunakan <video> tag

Embedding video adalah serupa dengan audio, menggunakan tag <video> :

 <video src = "movie.mp4" mengawal width = "640" ketinggian = "360"> </video>

• src adalah alamat video.
• controls memaparkan bar kawalan.
• width dan height mengawal saiz pemain.

Begitu juga, untuk keserasian dengan pelayar yang berbeza, anda boleh menentukan pelbagai sumber video:

 <video kawalan width = "640" ketinggian = "360">
  <source src = "movie.mp4" type = "video/mp4">
  <Source src = "Movie.webm" type = "Video/Webm">
  Penyemak imbas anda tidak menyokong main balik video.
</video>

Nota:

• Adalah disyorkan untuk menggunakan format MP4 dan Webm untuk merangkumi pelayar arus perdana.
• Apabila fail video besar, anda harus mempertimbangkan kelajuan memuatkan, dan anda boleh mempertimbangkan pemampatan atau menggunakan pecutan CDN.

Main balik automatik dan tetapan bisu

Kadang -kadang kita mahu video atau audio bermain secara automatik, tetapi pelayar moden melarang secara automatik memainkan kandungan audio secara lalai untuk pengalaman pengguna. Jika anda perlu melaksanakan main balik automatik, disarankan untuk menambah atribut muted :

 <video src = "intro.mp4" Autoplay control loop> </video>

• autoplay bermaksud main balik automatik.
• muted ditetapkan untuk bisu untuk mengelakkan disekat oleh penyemak imbas.
• loop membolehkan gelung main balik video.

Dalam aplikasi sebenar, sesetengah laman web akan mula -mula bising dan dimainkan secara automatik, dan kemudian memberikan pengguna dengan butang "unmute", yang bukan sahaja mematuhi spesifikasi tetapi juga meningkatkan pengalaman.

Sifat praktikal lain

Sebagai tambahan kepada yang disebutkan di atas, terdapat beberapa sifat yang biasa digunakan yang boleh ditambah mengikut keperluan anda:

• preload : Kawalan sama ada kandungan dimuatkan. Nilai pilihan adalah "auto" , "metadata" dan "none" .
• poster ( <video> sahaja): Tetapkan imej penutup sebelum video dimainkan.
• crossorigin : Digunakan untuk permintaan sumber silang domain, terutamanya apabila anda memuatkan audio dan video dari nama domain lain, anda harus memberi perhatian kepada harta ini.

Contohnya:

 <video 
  src = "demo.mp4" 
  Kawalan 
  poster = "pratonton.jpg"
  Preload = "Auto"
> </video>

Pada dasarnya itu sahaja. Sebenarnya tidak sukar untuk menambah audio dan video dengan HTML5, tetapi terdapat beberapa mata yang mudah diabaikan, seperti keserasian format, sekatan main balik automatik, pengoptimuman beban, dan lain -lain. Hanya perhatikan aspek -aspek ini dan ia akan berfungsi dengan lancar pada pelayar yang paling moden.

Atas ialah kandungan terperinci Menambah kandungan audio dan video ke halaman web menggunakan tag HTML5.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!