การแชร์นี้เป็นเครื่องเล่นวิดีโอที่กำหนดเองตามฉลาก HTML5 ในหมู่พวกเขาฟังก์ชั่นเช่นการเล่นหยุดชั่วคราวการลากความคืบหน้าการควบคุมระดับเสียงและหน้าจอเต็มรูปแบบจะถูกนำมาใช้
ดูตัวอย่างคลิกฉันเพื่อดูคลังสินค้าซอร์สโค้ด
ความคิดหลักฉันเชื่อว่ารองเท้าเด็กบางคนที่ไม่ได้สัมผัสกับการสร้างผู้เล่นที่กำหนดเองจะอยู่ที่นี่เพื่อรับฉลาก
<video controls = ควบคุม autoplay = autoplay> <source src = movie.ogg type = video/ogg/> </video>
คุณสมบัติการควบคุมถูกตั้งค่าให้แสดงแถบควบคุมของเบราว์เซอร์ในอินเทอร์เฟซ หากไม่มีความต้องการ UI ตัวควบคุมที่สร้างขึ้นในตัวสามารถตอบสนองความต้องการส่วนใหญ่ได้แล้ว แน่นอนถ้าเป็นเช่นนั้นคุณจะไม่เห็นการแบ่งปันนี้ = -
ซ่อนแถบควบคุมและจำลองจากนั้นกุญแจสู่ผู้เล่นที่ใช้ฟังก์ชั่นที่กำหนดเองคือเราไม่ได้ใช้คอนโทรลเลอร์เนทีฟเพื่อซ่อนไว้ เรารวมถึงข้อมูลการเล่น UI และการเล่นวิดีโอที่สอดคล้องกันของพฤติกรรมการทำงานของผู้ใช้
การใช้ฟังก์ชั่นหลักและคุณลักษณะหลายอย่างmyVID = document.getElementById (วิดีโอ 1); .DURATION // ส่งคืนความยาวทั้งหมดของวิดีโอ // การจำลองวิดีโอระดับเสียง myvid.volume // volume // หลังจากได้รับวิดีโอแล้วมันจะถูกกำหนดเมื่อเปลี่ยนจากการโหลดเพื่อเล่น myvid.readystate // 0 = have_nothing -no เกี่ยวกับเสียง/ว่าวิดีโอพร้อม // 1 = have_metadata -about เสียง/วิดีโอที่ metadata // 2 = have_current_data -data เกี่ยวกับตำแหน่งการเล่นปัจจุบันมีอยู่ แต่ไม่มีข้อมูลเพียงพอที่จะเล่นเฟรมถัดไป/มิลลิวินาที // 3 = have_future_data -กระแสและอย่างน้อยเฟรมถัดไปของข้อมูลพร้อมใช้งาน // 4 = have_enough_data -ข้อมูลที่สามารถใช้งานได้ก็เพียงพอที่จะเริ่มเล่น
ในประเด็นสำคัญทั้งหมดในการดำเนินการยิ่งน่าเบื่อมากขึ้นคือการจำลองแถบความคืบหน้า ในหมู่พวกเขาแอตทริบิวต์ CurrentTime และระยะเวลาในฉลากวิดีโอใช้ในการคำนวณตำแหน่งของแถบความคืบหน้าเมื่อเทียบกับความยาวทั้งหมดผ่านเวลาเล่นปัจจุบันและเวลาเล่นทั้งหมด ในเวลาเดียวกันความยาวของผู้ใช้ในการตั้งค่าสุดท้ายของผู้ใช้ยังสามารถใช้เพื่อย้อนกลับตำแหน่งของวิดีโอในเวลานี้
ลากไอเดียรหัส // core code ตัวอย่าง var dragdis = 0var proceswidth = xxx // ความยาวรวมของแถบการลาก ('body') แสดงผลที่ videosource.pause.pause ()}) (ซ้าย <0) {left = 0} dragtarget.css ({ซ้าย: ซ้าย}) dragprocess.css ({ความกว้าง: ซ้าย}) ProcessWidth * Duration // คำนวณตำแหน่งการเล่นที่ถูกต้องของวิดีโอหลังจากการลากการควบคุมระดับเสียงนั้นเหมือนกันกับพฤติกรรมข้างต้น
ควบคุมแอนิเมชั่นการโหลดก่อนเล่นโดยสอบถามสถานะการสตรีมวิดีโอ ฟังก์ชั่น ifstate () {var state = videoSource.readyState ถ้า (state === 4) {// 状态为 4 即可播放 VideoPlayer ()} else {$ ('. play-sym-wrapper') ลบ () $ () $ () ('body') fstate, 10)}} settimeout (ifstate, 10)ส่วนควบคุมหลักเสร็จสิ้นแล้วนักเรียนที่สนใจสามารถคลิกที่ซอร์สโค้ด HTML เพื่อเล่น ฟังก์ชั่นพื้นฐานของเครื่องเล่นวิดีโอทั้งหมดได้รับการตระหนัก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้