ต้องการเล่นวิดีโอแบบเต็มหน้าจอบนหน้าแรกของคุณหรือไม่? วิดีโอนี้ใช้เป็นพื้นหลังของหน้าเว็บและไม่ส่งผลต่อการเรียกดูเนื้อหาเว็บตามปกติ บอกเลยว่ามี Javascript Library ที่เหมาะกับความต้องการของคุณ นั่นก็คือ Bideo.js
ลักษณะเฉพาะการปรับอัตโนมัติ: Bideo.js สามารถปรับขนาดวิดีโอตามขนาดของหน้าต่างเบราว์เซอร์ปัจจุบันได้โดยอัตโนมัติ เมื่อปรับหน้าต่างเบราว์เซอร์แล้วจะปรับขนาดหน้าต่างได้โดยอัตโนมัติเพื่อให้วิดีโอ สามารถใช้เป็นพื้นหลังและแสดงแบบเต็มหน้าจอได้
โอเวอร์เลย์: หลังจากที่ใช้วิดีโอเป็นพื้นหลังของหน้าเว็บแล้ว เราก็สามารถวางเนื้อหา HTML ใดๆ ไว้ด้านบนของวิดีโอได้
หน้าปกวิดีโอ: เมื่อเปิดหน้า วิดีโออาจใช้เวลาโหลดไม่กี่วินาที จากนั้นเราสามารถตั้งค่ารูปภาพเป็นหน้าปกของวิดีโอและรอจนกว่าจะโหลดก่อนจึงจะเล่นได้
HTMLเพิ่มโค้ด HTML ต่อไปนี้ลงในเนื้อหาของเพจ แน่นอนว่าแท็ก <video> ใช้ในการโหลดวิดีโอ แอตทริบิวต์ loop หมายถึงการวนซ้ำวิดีโอ และการปิดเสียงหมายถึงโหมดปิดเสียง นั่นคือระดับเสียงเป็น 0 #video_cover คือหน้าปกวิดีโอเริ่มต้น #overlay คือเลเยอร์มาส์กที่ใช้แสดงเนื้อหาอื่นๆ ของหน้าทั้งหมด
<div id=container> <video id=พื้นหลัง_วิดีโอวนรอบปิดเสียง></วิดีโอ> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <ส่วน id=main_content> <div id=head> <h1>HTML5 ใช้พื้นหลังวิดีโอแบบเต็มหน้าจอได้อย่างง่ายดาย - Bideo.js</h1> <p class=sub_head>ไลบรารี Javscript ที่สามารถเพิ่มวิดีโอพื้นหลังแบบเต็มหน้าจอลงในเพจได้อย่างง่ายดาย </p> <p class=info>(รอสักครู่ วิดีโอจะใช้เวลาสักครู่ในการโหลด)</p> </div> </section></div>
นอกจากนี้เรายังเพิ่ม #video_controls ซึ่งใช้ในการควบคุมการเล่นวิดีโอและหยุดชั่วคราว เหมาะสำหรับโทรศัพท์มือถือ สุดท้ายนี้ คุณสามารถเพิ่มเนื้อหา HTML ที่คุณต้องการแสดงในส่วนถัดไปได้
ซีเอสเอสCSS ก็มีความสำคัญเช่นกัน สิ่งที่สำคัญที่สุดที่ต้องใส่ใจคือการตั้งค่าของ #container และ #พื้นหลัง_วิดีโอ สามารถใช้โค้ด CSS ต่อไปนี้ได้โดยตรงโดยไม่มีคำอธิบาย:
* { ระยะขอบ: 0; html, เนื้อความ { ความกว้าง: 100%; ความสูง: 100%; ล้น: ซ่อนอยู่; : 0; ด้านล่าง: 0; ความสูง: 100%;}#พื้นหลัง_วิดีโอ { ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; -50%); พอดีวัตถุ: ปก; ความสูง: 100%; ความกว้าง: 100%;}#video_cover { ตำแหน่ง: สัมบูรณ์; ความสูง: 100%; - ทำซ้ำ; พื้นหลังขนาด: ปก; ตำแหน่งพื้นหลัง: กลาง;} #ซ้อนทับ: ด้านบน: 0; ซ้าย: 0; RGBA(0,0,0,0.5);} จาวาสคริปต์ขั้นแรกให้โหลดไลบรารี Bideo:
<script src=bideo.js></script>
จากนั้นสร้างอินสแตนซ์ Bido: new Bideo() จากนั้นเริ่มต้นการโหลดโดยตรงและตั้งค่าตัวเลือกต่อไปนี้:
(function () { var bv = new Bideo(); bv.init({ // องค์ประกอบวิดีโอ videoEl: document.querySelector('#พื้นหลัง_วิดีโอ'), // คอนเทนเนอร์องค์ประกอบคอนเทนเนอร์: document.querySelector('body'), / / ปรับขนาดการปรับเปลี่ยนแบบอะแดปทีฟ: จริง, // เล่นอัตโนมัติ: เท็จ, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), PauseButton: document.querySelector('#pause'), // โหลดแหล่งวิดีโอและแทนที่ไฟล์แหล่งวิดีโอของคุณเองตามธุรกิจจริง src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', พิมพ์: 'video/mp4' }, { src: 'night.webm', พิมพ์: 'video/webm;codecs=vp8, vorbis' } ], // เมื่อโหลดวิดีโอแล้ว หน้าปกวิดีโอจะถูกซ่อน onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());เพียงเท่านี้ หน้าวิดีโอพื้นหลังที่มีรูปลักษณ์สวยงามก็เสร็จสมบูรณ์แล้ว ยินดีต้อนรับเข้าสู่การสาธิตออนไลน์และดาวน์โหลดซอร์สโค้ด สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Bideo.js โปรดดูที่อยู่โครงการ github: https://github.com/rishabhp/bideo.js
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network