1. ขั้นแรก แสดงภาพต้นฉบับของวิดีโอเขื่อนกั้นน้ำ ข้อเท็จจริงพูดเพื่อตัวมันเอง
2.การแสดงรหัส
1> การแสดงรหัส html
<div class=barrage> <video id=myvideo เล่นอัตโนมัติ ความกว้างของวง=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -เนื้อหาแสดงที่นี่--> </div> </div> <!--ส่งกล่องโต้ตอบ--> <div class=send> <input type=text class=s_text placeholder=ใช้ Enter เพื่อส่งเขื่อนอย่างรวดเร็ว/> <input type=button class=s_btn value=Send/> <!--ปิดฟังก์ชันเขื่อนกั้นน้ำ--> <span class=barrage_close>ปิดเขื่อน</span> < !-- ปิดเสียง ฟังก์ชั่น--> <span id=muted>เปิดเสียง</span> </div> </div>
2> การแสดงรหัส CSS
*{ การขยาย: 0; ระยะขอบ: 0;} อินพุต { เค้าโครง: ไม่มี;} .barrage { ตำแหน่ง: สัมพันธ์; ความกว้าง: 100%; ความสูง: 250px;} #myvideo{ ตำแหน่ง: สัมบูรณ์; :300px; */ top: -50px; left: 0; z-index: -1;}.barrage .screen { ตำแหน่ง: ด้านบนสุด: 0px; ขวา: 0px; ความกว้าง: 100%; ความสูง: 300px;} .barrage .screen .content { ตำแหน่ง: สัมพันธ์กัน; ความสูง: 250px; =100); *//***สำหรับเบราว์เซอร์ ie8 หรือสูงกว่าหรือเก่ากว่า****/ สีพื้นหลัง: โปร่งใส; 1;}.barrage .screen .content div { ตำแหน่ง: สัมบูรณ์; ขนาดตัวอักษร: 20px; { ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; ความกว้าง: 100%; ความสูง: 55px; 1; /*พื้นหลัง: #000;*/ พื้นหลัง: rgba(0,0,0,0.5); การจัดแนวข้อความ: center; /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { ความกว้าง: 60%; ความสูง: 35px; ตระกูลแบบอักษร: Microsoft Yahei; border-radius: 20px; line-height: 35px; -รัศมี: 10px ความทึบ: 0.8;}.barrage_close,#muted { width: 80px; height: 30px; line-height: 10px; text-align: center; : 0.8;}#muted{ พื้นหลัง:สีเหลือง;}.barrage_close1{ สี: #fff; พื้นหลัง: #fff;}/* css Animation*/.content div{ ภาพเคลื่อนไหว:ข้อความ 15s อนันต์ปกติ;}@keyframes ข้อความ{ 0%{ left:100%; } 20%{ left:75%; %{ ซ้าย:0%; } 100%{ ซ้าย:-30%;3> การแสดงรหัส js
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//ใส่เนื้อหาเขื่อนลงในอาร์เรย์เพื่อจัดเก็บ it var arr=[];var h=arr.push();// ตรวจสอบการส่ง กด Enter เพื่อส่ง document.onkeydown=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click(); } };//ส่งความคิดเห็น $(.send .s_btn ).คลิก(ฟังก์ชั่น () { ข้อความ var = $(.s_text).val(); ถ้า (ข้อความ == ) { alert('เนื้อหาของคุณว่างเปล่า กรุณากรอกความคิดเห็นก่อนส่ง'); return false; } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + ข้อความ + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//เตรียมใช้งานฟังก์ชันเทคโนโลยีเขื่อนกั้นน้ำ init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//ความกว้างสูงสุดของเบราว์เซอร์ (รวมถึงความสูงของเบราว์เซอร์ด้วย) เป็นค่าของการวางตำแหน่ง left console.log(_left); var _height =$(.barrage).height();//ความสูงสูงสุดของหน้าต่างวิดีโอ console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; นี้ ).css({ left: _left, top: _top, color: getColor() }); // แสดงข้อความเป็นประจำ // var time = 10,000; // if ($(this).index() % 2 == 0) { // time = 15000; // } // $(this).animate({ left: - + _left + px }, เวลา, ฟังก์ชัน () { // $(this).remove(); // }); });}//รับฟังก์ชันสีแบบสุ่ม getColor() { return '#' + (function (h) { return new Array(7 - - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(myvideo);var mute=document.getElementById( ปิดเสียง);console.log(ปิดเสียง);//ตั้งค่าความเร็วในการเล่นวิดีโอ//video.playbackRate = 0.5;//ปิดเสียงวิดีโอ video.muted = false;mute.onclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; mute.innerText = 'เปิดเสียง'; / / console.log(1111) }else{ video.muted = true; mute.innerText=''; mute.innerText = 'ปิดเสียง'; console.log(2222) }}3. การสาธิตเอฟเฟกต์โค้ด
<a style="margin: 0px; padding: 0px; เค้าร่าง: ไม่มี; line-height: 25.2px; ขนาดตัวอักษร: 14px; ความกว้าง: 660px; ล้น: ซ่อนไว้; ชัดเจน: ทั้งสอง; ตระกูลแบบอักษร: tahoma, arial, ไมโครซอฟต์ ยาเฮอิ;"><div class=barrage> <video id=myvideo วนซ้ำอัตโนมัติ = 100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { ตำแหน่ง: ความกว้าง; : 100%; height:250px;}#myvideo{ ตำแหน่ง: สัมบูรณ์; /* ความกว้าง: 100%; -50px; ซ้าย: 0; ดัชนี z: -1;}</style>สรุปข้างต้นคือฟังก์ชันเขื่อนวิดีโอที่ใช้ใน HTML5 ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!