ข้อมูลเบื้องต้นเกี่ยวกับปลั๊กอินการเล่นวิดีโอ HTML5 video.js

video.js เป็นปลั๊กอินเล่นวิดีโอ HTML5 ที่ได้รับความนิยมมาก เหมาะมากสำหรับการเล่นวิดีโอบนเทอร์มินัลมือถือ (เช่น หน้าเว็บ WeChat) มีฟังก์ชันอันทรงพลัง รองรับการดาวน์เกรดเป็นแฟลช และเข้ากันได้กับ IE8 เว็บไซต์อย่างเป็นทางการ: http://videojs.com/ git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

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

วิธีนี้จะปรากฏออกมา แต่ในความเป็นจริงแล้ว เรามีความต้องการอื่น

คุณต้องใช้ js ของ novtt ซึ่งอยู่ในไฟล์ alt ของการสาธิต วิธีนี้การเลือกตัวอักษรจะไม่ปรากฏในแถบควบคุมวิดีโอ แน่นอนว่าคุณไม่จำเป็นต้องมีองค์ประกอบแทร็กในหน้าอีกต่อไป

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

ฉันเริ่มตั้งค่าด้วยตัวเองโดยใช้ css แต่พบว่าไม่มีอะไรทำงาน องค์ประกอบวิดีโอแตกต่างจากองค์ประกอบทั่วไปตรงที่ต้องใช้ความกว้างและความสูงที่ตอบสนองโดยการตั้งค่าอัตราส่วนขององค์ประกอบภายใน video.js มีสองวิธี

js: ตั้งค่าของเหลวให้เป็นจริง

 var player = videojs('video', { Fluid: true }, function () { console.log('Good to go!'); this.play(); // หากคุณไม่ไว้ใจการเล่นอัตโนมัติด้วยเหตุผลบางประการ } )

แต่จำเป็นต้องตั้งค่าความกว้างและความสูงเริ่มต้นสำหรับองค์ประกอบวิดีโอด้วย ไม่เช่นนั้นจะมองไม่เห็นรูปภาพเริ่มต้น

css: สามารถเพิ่มสไตล์ได้โดยตรง มีสามประเภท: .vjs-fluid, .vjs-4-3, .vjs-16-9 ประเภทแรกจะถูกคำนวณโดยอัตโนมัติ และสองประเภทหลังจะระบุอัตราส่วน สไตล์ยังต้องตั้งค่าความกว้างและความสูงเริ่มต้นเพื่อแสดงรูปภาพ

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 ควบคุม preload=none data-setup=' { html5 : { NativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> จำเป็นต้องเปิดใช้งาน JavaScript เพื่อเล่นวิดีโอ ขอแนะนำให้ใช้เบราว์เซอร์ <a href=http://videojs.com/html5-video-support/ target=_blank> ที่รองรับ HTML5< /a> เพื่อเข้าถึง </p> </วิดีโอ>

ความสนใจในกิจกรรม:

โดยทั่วไปเรามุ่งเน้นไปที่เหตุการณ์สามเหตุการณ์ ได้แก่ เริ่มต้น หยุดชั่วคราว และสิ้นสุด

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // หากคุณไม่ไว้ใจการเล่นอัตโนมัติด้วยเหตุผลบางประการ }) ; player.on('play', function () { console.log('Start/Resume play'); }); player.on('pause', function () { console.log('หยุดเล่นชั่วคราว'); }); player.on('สิ้นสุด', function () { console.log('สิ้นสุดการเล่น'); });

นอกจากนี้ยังมีกิจกรรมอัปเดต:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

คุณสามารถกำหนดได้ว่าวิดีโอจะจบลงหรือไม่โดยการตัดสินว่าเวลาปัจจุบันและเวลาทั้งหมดเท่ากันหรือไม่:

 player.on('timeupdate', function () { // ถ้า currentTime() === Duration() วิดีโอจะเล่นจบแล้วถ้า (player.duration() != 0 && player.currentTime() === player .duration()) { // สิ้นสุดการเล่น} });

ผู้อาวุโสบางคนชี้ให้เห็นว่าเหตุการณ์ที่สิ้นสุดไม่ได้รับการกระตุ้นอย่างถูกต้องบนอุปกรณ์ Android (เตรียมตัวให้พร้อมก่อน)

การตั้งค่าเริ่มต้นของ iis MIME จะไม่เพิ่มประเภท mp4 จะไม่มีปัญหากับการเล่นในเครื่อง แต่ข้อผิดพลาด 404 จะเกิดขึ้นเมื่อมาถึงเซิร์ฟเวอร์ สิ่งนี้ต้องมีการตั้งค่า MIME ใน iis:

รูปแบบ flv จะถูกเพิ่มพร้อมกับส่วนขยายที่เกี่ยวข้อง: .flv ประเภทเนื้อหา: application/octet-stream

รูปแบบ f4v คือนามสกุล: .f4v ประเภทเนื้อหา: application/octet-stream

รูปแบบ MP4 เป็นนามสกุล: .mp4 ประเภทเนื้อหา: วิดีโอ/mp4

รูปแบบ ogv คือนามสกุล: .ogv ประเภทเนื้อหา: video/ogg

รูปแบบ webm เป็นนามสกุล: .webm ประเภทเนื้อหา: video/webm

รีสตาร์ท iis หลังจากการตั้งค่าเพื่อให้มีผล

อย่างเป็นทางการให้ที่อยู่ codepen http://codepen.io/heff/pen/EarCt ซึ่งคุณสามารถแก้ไขและเล่นได้ ส่วนใหญ่เป็นปุ่มเล่น แถบควบคุม และแถบความคืบหน้า ค่าเริ่มต้นเป็นไปตามข้างต้น

นอกจากนี้ยังมีอันนี้: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

เทคโนโลยีการเล่นจะใช้ในการเล่นไฟล์วิดีโอหรือไฟล์เสียงในเบราว์เซอร์หรือปลั๊กอิน หากเป็น h5 จะใช้องค์ประกอบวิดีโอหรือเสียง หากเป็นแฟลช ก็จะกำหนดโปรแกรมเล่นแฟลช ไม่เพียงแต่แฟลชเท่านั้น แต่ยังรองรับ Silverlight, Quicktime และเทคโนโลยีอื่นๆ สำหรับการเล่นอีกด้วย การตั้งค่าข้อมูลสามารถกำหนดได้โดยตรงในองค์ประกอบ ระบุเทคโนโลยีที่รองรับ

 <video data-setup='{techOrder: [html5, flash, เทคโนโลยีอื่นๆ ที่รองรับ]}'

หรือใช้จาวาสคริปต์:

 videojs (videoID, { techOrder: [html5, แฟลช, เทคโนโลยีที่รองรับอื่น ๆ ]});

กฎเริ่มต้นที่นี่คือเทคโนโลยีแรกที่จะถูกนำมาใช้ในการเล่น และหากล้มเหลว ตัวเลือกที่ตามมาจะถูกนำมาใช้ ตัวอย่างเช่น หากเขียน html5 ในตำแหน่งแรกด้านบน วิดีโอทั้งหมดจะเล่นโดยใช้ html5 หากเราต้องการให้แฟลชมีความสำคัญ ก็แค่วางไว้ข้างหน้า:

 data-setup='{ techOrder: [flash,html5] }'

ในองค์ประกอบของหน้า คุณจะพบว่า video.js ให้ออบเจ็กต์แฟลชที่เราใช้

เพิ่มแอตทริบิวต์เล่นอัตโนมัติให้กับองค์ประกอบวิดีโอ หรือเพิ่มเล่นอัตโนมัติ:true ใน js

 <video id=video autoplay poster=/images/bk.png width=375 height=200 ควบคุมการโหลดล่วงหน้า=none > </video>

หรือ

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // Insurance คุณสามารถเรียก play( ) });

การเล่นอัตโนมัติน่ารำคาญอยู่เสมอ ดังนั้นสิ่งที่ตรงกันข้ามคือลบแอตทริบิวต์การเล่นอัตโนมัติหรือตั้งค่าเป็นเท็จ

อื่น:

video.js รองรับปลั๊กอินเสริมซึ่งสะดวกต่อการใช้งานมาก

 //กำหนดฟังก์ชันปลั๊กอิน examplePlugin(options) { this.on('play', function (e) { console.log('playback has beginning!'); }); //Register videojs.plugin(' examplePlugin' , examplePlugin); // ใช้ player.examplePlugin ({ exampleOption: true });

API ของผู้เล่นสามารถเรียกได้โดยตรงภายในปลั๊กอิน มีปลั๊กอินเพลย์ลิสต์ที่คุณสามารถศึกษาได้หากต้องการเพลย์ลิสต์ https://github.com/brightcove/videojs-playlist และ http://videojs.com/advanced/ มีผลกระทบนี้:

ข้างต้นคือการแนะนำปลั๊กอินการเล่นวิดีโอ HTML5 video.js ที่โปรแกรมแก้ไขแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!