ينفذ HTML5 وظيفة وابل الفيديو

1. أولاً، اعرض الصورة الأصلية لفيديو القصف، فالحقائق تتحدث عن نفسها.

2. عرض الكود

1>عرض كود HTML

 <div class=barrage> <video id=myvideo autoplay Loop width=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%؛ الارتفاع: 250 بكسل؛}#myvideo{ الموضع: مطلق /* العرض: 100% :300px; */ أعلى: -50px; يسار: 0;.barrage .screen { الموضع: مطلق: 0px; يمين: 0 بكسل؛ العرض: 100%؛ الارتفاع: 300 بكسل؛ .barrage .screen .content { الموضع: العرض: 100% الارتفاع: 250 بكسل; =100)؛ *//*** للمتصفحات ie8 أو أعلى أو أقدم ****/ لون الخلفية: شفاف z-index: 1;}.barrage .screen .content div { الموضع: حجم الخط المطلق: 20 بكسل؛ .barrage .send { الموضع: أسفل: 0 بكسل؛ العرض: 100% الارتفاع: 55 بكسل؛ 1; /*الخلفية: #000;*/ الخلفية: rgba(0,0,0,0.5); .barrage .send .s_text { width: 60% height: 35px; عائلة الخط: نصف قطر الحدود: 20 بكسل؛ العتامة: 0.8؛ .send .s_btn { العرض: 105 بكسل؛ ارتفاع الخط: 35 بكسل؛ -نصف القطر: 10 بكسل؛ العتامة: 0.8;}.barrage_ Close,#muted { width: 80px; height: 30px; border-radius: 10px; color: #22B14C; : 0.8;}#muted{ الخلفية:أصفر;}.barrage_Close1{ اللون: #fff; الخلفية: #fff;}/* css Animation*/.content div{ Animation:Text 15s infinite Normal;}@keyframes Text{ 0%{ left:100% } 20%{ left:75% } 80 %{ يسار:0% } 100%{ يسار:-30% }}

3> عرض رمز JS

 $(function () { $(.barrage_ Close).click(function(){ $(.content div).remove(); }); init_barrage();});// ضع محتوى الوابل في مصفوفة لتخزينه it var arr=[];var h=arr.push();// مراقبة الإرسال، اضغط على زر الإدخال للإرسال document.οnkeydοwn=function(event){ var e = events || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click(); } };// إرسال التعليق $(.send .s_btn .click(function () { var text = $(.s_text).val(); if (text == ) { تنبيه ("المحتوى الخاص بك فارغ، يرجى ملء التعليقات قبل الإرسال")؛ } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.content).append(_lable.show()); $(.s_text).val();});// تهيئة وظيفة تقنية الوابل init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();// الحد الأقصى لعرض المتصفح (أيضًا ارتفاع المتصفح)، كقيمة الموضع الأيسر console.log(_left); =$(.barrage).height();// أقصى ارتفاع لنافذة الفيديو console.log(_height); this .css({ left: _left, top: _top, color: getColor() }); // انبثق النص بانتظام // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000 // } // $(this).animate({ left: - + _left + px }, time, function () { // $(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( muted);console.log(muted);//ضبط سرعة تشغيل الفيديو//video.playbackRate = 0.5;// تم كتم الفيديو video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; // console.log(1111) }else{ video.muted = true; console.log(2222) }}

3. مظاهرة تأثير التعليمات البرمجية

 <a style = "الهامش: 0px؛ الحشو: 0px؛ المخطط التفصيلي: لا شيء؛ ارتفاع الخط: 25.2 بكسل؛ حجم الخط: 14 بكسل؛ العرض: 660 بكسل؛ التجاوز: مخفي؛ واضح: كلاهما؛ عائلة الخط: تاهوما، أريال، مايكروسوفت ياهي؛"> 
 <div class=barrage> <video id=myvideo autoplay Loop width=100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { الموضع: العرض النسبي; : 100% الارتفاع: 250 بكسل;}#myvideo{ الموضع: مطلق /* العرض: 100% الارتفاع: 300 بكسل; -50 بكسل; اليسار: 0; مؤشر z: -1;</style>
 تلخيص
 ما ورد أعلاه هو وظيفة وابل الفيديو التي تم تنفيذها في HTML5 والتي قدمها المحرر وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
 إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!