Sebelum HTML5 keluar, audio dan video online diwujudkan dengan bantuan Flash atau alat pihak ketiga. Di browser yang mendukung HTML5, audio dan video dapat diputar tanpa menginstal plug-in apa pun. Dukungan asli untuk audio dan video memberikan potensi pengembangan yang besar ke dalam HTML5.
Penyematan audio dalam HTML (metode tradisional): Meskipun metode ini dapat diterapkan, namun memerlukan browser yang mendukung Flash dan tidak dapat dikontrol, sehingga sangat merepotkan untuk diterapkan.
<tinggi objek=200 lebar=200 data=2_1.swf ></objek><embed src=2_1.mp4 type=>
Artinya ada masalah besar dengan HTML5, yaitu kompatibilitas. Audio
Format audio yang didukung oleh HTML5: videoformat video:
Terlihat dari penjelasan di atas bahwa HTML5 sepertinya mendukung beberapa format, jadi ketika Anda menemukan audio dan video tidak ditampilkan saat menggunakan HTML5, seharusnya masalahnya adalah format tersebut tidak didukung. Catatan: MP4 memiliki 3 pengkodean, mpg4(xdiv),,mpg4(xvid), avc(h264). Hanya h264 yang merupakan pengkodean standar MP4 yang dikenali (Saya juga tertipu di sini, format lain hanya memiliki suara tetapi tidak ada gambar.) Jika Anda menghadapi masalah seperti ini, cukup gunakan pengonversi format video untuk mengonversi format dan semuanya akan baik-baik saja.
Audio sangat sederhana untuk diterapkan: toolbar di sini menggunakan toolbar default browser.
<audio src=htmls/1.mp3 controlled=controls loop=loop preload=auto >Browser Anda tidak mendukung elemen video</audio>
Meskipun default browser dapat digunakan untuk video, penyesuaian pribadi tidak dimungkinkan, jadi dari sudut pandang teknis, Anda masih perlu mempelajari cara membuat alat sendiri untuk mengimplementasikan fungsi (audio juga dapat merujuk ke metode ini).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Tempatkan video di halaman web</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 kontrol=kontrol loop=loop preload=auto >Browser Anda tidak mendukung elemen video</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 controlled=controls loop=loop poster=3.jpg>Browser Anda tidak mendukung Elemen audio <!-- MP4 memiliki 3 pengkodean, mpg4(xdiv),,mpg4(xvid), avc(h264), Hanya h264 yang merupakan pengkodean standar MP4 yang diakui--></video><div id=progress></div><!-- Kontrol volume--><input id=volume type=range min=0 max=1 step = 0,1 onchange=Volume(ini)><!-- Informasi kemajuan kecepatan dan waktu--><span id=rate>1</span>fps <span id=info></span><button onclick=Mainkan(ini) id=btn1>Mainkan</button><button onclick=Fast()>Maju cepat</button><button onclick=Slow()>Maju lambat</button><button onclick=Prev() >Kembali</button><button onclick=Next()>Maju</button><button onclick=Muted(this)>Bungkam</button></body></html>
Tampilan (html) dan implementasi fungsi (js) dipisahkan dan diimpor dari luar.
ControlBar.js
//Gunakan skrip untuk mendeteksi tag browser support var support = !!document.createElement(audio).canPlayType;if (!support) {alert(browser Anda tidak mendukung pemutaran video ini);}//Tentukan objek Video global var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Maju: satu menit*/function Next() {e1.currentTime+=10; //Setel properti currentTime, maju cepat 10s}/*Putar balik: satu menit*/function Prev() {e1.currentTime-=10; //Setel properti currentTime, mundur 10s}/ *Putar/Jeda*/fungsi Putar(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Maju lambat: Jika kurang dari atau sama dengan 1, ia hanya melambat sebesar 0,2 setiap kali; jika lebih besar dari 1, ia berkurang 1 setiap kali */fungsi Lambat(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Maju lambat: Jika kurang dari atau sama dengan 1, ia hanya melambat sebesar 0,2 setiap kali; jika lebih besar dari 1, ia berkurang 1 setiap kali */fungsi Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}fungsi fps2fps(fps ){jika(fps<1){kembali fps.toFixed(1);}else{return fps;}}/*Mute*/function Dibungkam(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Sesuaikan volume*/fungsi Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Informasi kemajuan: mengontrol bilah kemajuan dan menampilkan waktu kemajuan*/fungsi Kemajuan( ) {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}fungsi s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* Setelah halaman web dimuat, tambahkan fungsi pemrosesan kemajuan ke acara timeupdate objek video*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Tambahkan kemajuan ke window.onload fungsi Pemrosesan acara */window.addEventListener(load,Progress);Fungsi yang diterapkan: putar, jeda, maju cepat, maju lambat, maju, mundur, kontrol volume, bilah kemajuan, dan tampilan waktu. Terlihat bahwa fungsi yang lebih kompleks dapat dicapai melalui properti dan metode Audio atau Video.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.