ก่อนที่ HTML5 จะออกมา เสียงและวิดีโอออนไลน์ก็เกิดขึ้นได้ด้วยความช่วยเหลือของ Flash หรือเครื่องมือของบุคคลที่สาม ตอนนี้ HTML5 ก็รองรับฟังก์ชันนี้เช่นกัน ในเบราว์เซอร์ที่รองรับ HTML5 สามารถเล่นเสียงและวิดีโอได้โดยไม่ต้องติดตั้งปลั๊กอินใดๆ การสนับสนุนแบบเนทิฟสำหรับเสียงและวิดีโอช่วยเพิ่มศักยภาพในการพัฒนาอย่างมากให้กับ HTML5
การฝังเสียงใน HTML (วิธีดั้งเดิม): แม้ว่าวิธีนี้สามารถใช้ได้ แต่ต้องใช้เบราว์เซอร์ที่รองรับ Flash และไม่สามารถควบคุมได้ ดังนั้นจึงเป็นเรื่องยากมากที่จะนำไปใช้
<ความสูงของวัตถุ=200 ความกว้าง=200 ข้อมูล=2_1.swf ></วัตถุ><ฝัง src=2_1.mp4 ประเภท=>
นั่นหมายความว่ามีปัญหาใหญ่กับ HTML5 ซึ่งก็คือความเข้ากันได้ เสียง
รูปแบบเสียงที่รองรับโดย HTML5: วิดีโอรูปแบบวิดีโอ:
จากด้านบนจะเห็นได้ว่า HTML5 ดูเหมือนจะรองรับบางรูปแบบ ดังนั้นเมื่อคุณพบว่าเสียงและวิดีโอไม่แสดงเมื่อใช้ HTML5 ก็น่าจะเป็นปัญหาที่ไม่รองรับรูปแบบนั้น หมายเหตุ: MP4 มีการเข้ารหัส 3 แบบ ได้แก่ mpg4(xdiv),,mpg4(xvid), avc(h264) มีเพียง h264 เท่านั้นที่เป็นการเข้ารหัสมาตรฐาน MP4 ที่ได้รับการยอมรับ (ฉันก็ถูกหลอกเช่นกัน รูปแบบอื่น ๆ จะมีแต่เสียง แต่ไม่มีภาพ) หากคุณ ประสบปัญหาประเภทนี้ เพียงใช้ตัวแปลงรูปแบบวิดีโอในการแปลงรูปแบบก็จะเรียบร้อย
เสียงนั้นใช้งานง่ายมาก: แถบเครื่องมือที่นี่ใช้แถบเครื่องมือเริ่มต้นของเบราว์เซอร์
<audio src=htmls/1.mp3 Controls=controls loop=loop preload=auto >เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบวิดีโอ</audio>
แม้ว่าค่าเริ่มต้นของเบราว์เซอร์สามารถใช้กับวิดีโอได้ แต่การปรับแต่งส่วนตัวไม่สามารถทำได้ ดังนั้นจากมุมมองทางเทคนิค คุณยังคงต้องเรียนรู้วิธีสร้างเครื่องมือของคุณเองเพื่อใช้ฟังก์ชันต่างๆ (เสียงสามารถอ้างอิงถึงวิธีนี้ได้เช่นกัน)
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>วางวิดีโอบนหน้าเว็บ</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 ควบคุม=การควบคุม ลูป=ลูปพรีโหลด=อัตโนมัติ >เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบวิดีโอ</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 Controls=controls loop=loop poster=3.jpg>เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบเสียง <!-- MP4 มีการเข้ารหัส 3 แบบ, mpg4(xdiv),,mpg4(xvid), avc(h264), มีเพียง h264 เท่านั้นที่เป็นการเข้ารหัสมาตรฐาน MP4 ที่ได้รับการยอมรับ--></video><div id=progress></div><!-- การควบคุมระดับเสียง--><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- ข้อมูลความคืบหน้าของอัตราและเวลา--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>เล่น</button><button onclick=Fast()>กรอไปข้างหน้า</button><button onclick=Slow()>กรอไปข้างหน้า</button><button onclick=Prev() >ย้อนกลับ</button><button onclick=Next()>ไปข้างหน้า</button><button onclick=Muted(this)>ปิดเสียง</button></body></html>
การใช้งานจอแสดงผล (html) และฟังก์ชั่น (js) ถูกแยกและนำเข้าจากภายนอก
ControlBar.js
//ใช้สคริปต์เพื่อตรวจสอบการรองรับแท็กเบราว์เซอร์ var support = !!document.createElement(audio).canPlayType;if (!support) {alert(your browser does not support the comparison of this video);}//Define global Video object var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*ส่งต่อ: หนึ่งนาที*/function Next() {e1.currentTime+=10; //ตั้งค่าคุณสมบัติ currentTime, กรอไปข้างหน้า 10s}/*ย้อนกลับ: หนึ่งนาที*/function Prev() {e1.currentTime-=10; //ตั้งค่าคุณสมบัติ currentTime, ย้อนกลับ 10s}/ *เล่น/หยุดชั่วคราว*/ฟังก์ชั่นเล่น(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*ก้าวไปข้างหน้าอย่างช้าๆ: เมื่อน้อยกว่าหรือเท่ากับ 1 มันจะช้าลงเพียง 0.2 ในแต่ละครั้ง เมื่อมากกว่า 1 มันจะลดลง 1 ในแต่ละครั้ง */function ช้า(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *เดินหน้าอย่างช้าๆ: เมื่อน้อยกว่าหรือเท่ากับ 1 มันจะช้าลงเพียง 0.2 ในแต่ละครั้ง เมื่อมากกว่า 1 มันจะลดลง 1 ในแต่ละครั้ง */function Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}ฟังก์ชัน fps2fps(fps ){if(fps<1){กลับมา fps.toFixed (1);} อื่น ๆ {return fps;}} / * ปิดเสียง * / ฟังก์ชั่น ปิดเสียง(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;}}/*ปรับระดับเสียง*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* ข้อมูลความคืบหน้า: ควบคุมแถบความคืบหน้าและแสดงเวลาความคืบหน้า*/function Progress( ) {var p1=document.getElementById(ความคืบหน้า);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(ข้อมูล).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}ฟังก์ชัน 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);}/* หลังจากโหลดหน้าเว็บแล้ว ให้เพิ่มฟังก์ชันการประมวลผลความคืบหน้าให้กับเหตุการณ์การอัพเดตเวลาของออบเจ็กต์วิดีโอ*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*เพิ่มความคืบหน้าให้กับ ฟังก์ชั่นการประมวลผลเหตุการณ์ window.onload */window.addEventListener (โหลด, ความคืบหน้า);ฟังก์ชั่นที่นำมาใช้: เล่น หยุดชั่วคราว กรอเดินหน้าอย่างช้าๆ ไปข้างหน้า ย้อนกลับ ควบคุมระดับเสียง แถบความคืบหน้า และการแสดงเวลา จะเห็นได้ว่าฟังก์ชันที่ซับซ้อนมากขึ้นสามารถทำได้ผ่านคุณสมบัติและวิธีการของเสียงหรือวิดีโอ
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network