คำอธิบายโดยละเอียดเกี่ยวกับการควบคุมของวิดีโอเสียงและวิดีโอเสียงใหม่ (คำแนะนำ)

บทความนี้บอกถึงการควบคุมวิดีโอเสียงและวิดีโอแอตทริบิวต์ใหม่ของ H5

 <udio controls = controls> <source src = วางพา ธ ไฟล์เสียงลงไป> </sourced> </usic>

 <video controls = controls loop = loop autoplay = autoplay id = video> <source src = ใส่พา ธ ไฟล์วิดีโอลงไป> </source> </video> <button> </button> บน> เปิดเสียง </ /ปุ่ม> <button> เล่น </putton> <button> หยุดเล่น </button> <button> เต็มหน้าจอ </button>

ต่อไปนี้คือการควบคุมไฟล์วิดีโอ

JavaScript นำไปสู่

 <script> var myvideo = document.getElementById (วิดีโอ); 1] .click = function () {myvideo.muted = true; );

ซิงโครนัส

ดังแสดงในรูป:

ให้ฉันพูดถึงที่นี่ก่อนอื่น

(1) ค่าสูงสุดของความยาวรวมของวิดีโอไปยังวิดีโอไปยังแถบความคืบหน้า, progress.max = video.duration;

(2) จำเป็นต้องได้รับความยาวของตำแหน่งปัจจุบันของการเล่นวิดีโอปัจจุบันถึงความยาวของแถบความคืบหน้าปัจจุบัน, progress.value = video.currenttime;

จากนั้นในขณะที่การเล่นวิดีโอมีความจำเป็นเพื่อให้แน่ใจว่ามูลค่าของแถบความคืบหน้าสามารถรับช่วงเวลาของวิดีโอและตำแหน่งเวลาการเล่นปัจจุบันในเวลา

คุณต้องเปิดตัวจับเวลา setInterval (Pro, 100); :: หมายความว่าค่าของวิดีโอถูกกำหนดให้กับแถบความคืบหน้าที่ 1 มิลลิวินาทีเพื่อให้แน่ใจว่าทันเวลา

ด้วยวิธีนี้แถบความคืบหน้าสามารถซิงโครไนซ์กับวิดีโอได้อย่างแม่นยำ

1. ก่อนอื่นคุณต้องได้รับค่าของช่วงและระดับเสียงที่มอบให้กับวิดีโอเพื่อควบคุมระดับเสียงของวิดีโอ

 <อินพุตประเภท = ช่วง min = 0 value = 50 max = 100 id = ช่วง /> var ran = document.getElementById (ช่วง);

รับ range.value

แอตทริบิวต์เสียงที่กำหนดให้กับวิดีโอ: video.volume = range.Value/100;

ในเวลานี้ปริมาตรของช่วงลากเพียงแค่การควบคุมวิดีโอ

จากนั้นคุณต้องเข้ามาในเสียงเพื่อปิดการตัดสิน

รหัสสุดท้ายมีดังนี้

 <! > ปิดเสียง </button> <ปุ่ม onclick = disableMute () type = ปุ่ม> เปิดเสียง </button> <button onclick = playvid () type = button> เล่นวิดีโอ </button> <button onclick = pauvid () ประเภท = ปุ่ม> ผ่านวิดีโอผ่าน </button> <ปุ่ม onclick = showfull () type = ปุ่ม> หน้าจอเต็ม </button> <span> ความคืบหน้า: </span> <ค่าความคืบหน้า = 0 max = 0 id = pro> </ความคืบหน้า > <span> ระดับเสียง: </span> <อินพุตประเภท = ช่วง min = 0 max = 100 value = 50 onChange = setValue () id = ran/> </div> </div> </div> ; ] .disabled = true; } // เล่นฟังก์ชั่นวิดีโอ playvid () {myvideo.play (); จำนวน funch setValue () {) {) myVideo.volume = ran.value/100;

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้