هذه المشاركة هي مشغل فيديو مخصص يعتمد على ملصق HTML5. من بينها ، يتم تنفيذ وظائف مثل Pause Pause ، وسحب التقدم ، والتحكم في مستوى الصوت ، والشاشة الكاملة.
معاينةانقر لي لعرض مستودع رمز المصدر.
فكرة أساسيةأعتقد أن بعض أحذية الأطفال التي لم تتعرض لإنشاء لاعبين مخصصين ستبقى هنا للتسميات.
<controls video = controls autoplay = autoplay> <source src = movie.ogg type = video/ogg/> </vide>
تم تعيين خاصية Controls لعرض شريط التحكم الخاص بالمتصفح في الواجهة. إذا لم يكن هناك طلب على واجهة المستخدم ، فيمكن أن تلبي وحدة التحكم التي تم بناؤها بالفعل معظم الاحتياجات. بالطبع ، إذا كان الأمر كذلك ، فلن ترى هذه المشاركة =. =
إخفاء شريط التحكم ومحاكاةثم يتمثل مفتاح اللاعب الذي ينفذ وظيفة مخصصة في أننا لا نستخدم وحدة التحكم الأصلية لإخفائها. الولايات المتحدة ، وكذلك بيانات واجهة المستخدم المحاكاة المقابلة وبيانات تشغيل الفيديو لسلوك تشغيل المستخدم.
استخدام العديد من الوظائف والسمات الأساسيةMyVid = document.getElementByid (Video1) ؛ .duration // إرجاع الطول الإجمالي للفيديو // وحدة تخزين الفيديو المحاكاة myvid.volume // volume // بعد الحصول على الفيديو ، يتم تحديده عندما يتم تبديله من التحميل إلى تشغيل myVid.ReadyState // 0 = have_nothing -no حول الصوت/ما إذا كان الفيديو جاهزًا // 1 = HAS_METADATA -ABOUT AUDIO/VIOLY في METADATA // 2 = HAD_CURRENT_DATA -DATA حول موقع التشغيل الحالي متاح ، ولكن لا توجد بيانات كافية لتشغيل الإطار التالي/ميليسيكووند // 3 = HAS_FUTURE_DATA -يتوفر الإطار التالي وعلى الأقل من الإطار التالي // 4 = HAS_ENOUGH_DATA -بيانات متاحة
في جميع النقاط الرئيسية في التنفيذ ، كلما كانت محاكاة شريط التقدم. من بينها ، يتم استخدام سمات الوقت الحالية والمدة في ملصق الفيديو لحساب موضع شريط التقدم بالنسبة إلى الطول الكلي من خلال وقت التشغيل الحالي ووقت التشغيل الكلي. في الوقت نفسه ، يمكن أيضًا استخدام طول المستخدم في الإعداد النهائي للمستخدم لعكس موضع الفيديو في هذا الوقت.
اسحب فكرة الكود // Core Code Sample var dragdis = 0var proceswidth = xxx // الطول الإجمالي لسحب الشريط ('body'). يتم تقديمها في نفس الموقع (اليسار <0) {left = 0} dragtarget.css ({Left}) dragprocess.css ({width: left}). عرض العملية * المدة // احسب موضع التشغيل الصحيح للفيديو بعد السحبإن التحكم في المجلد هو نفس السلوك أعلاه.
تحكم في الرسوم المتحركة قبل اللعب عن طريق الاستعلام عن حالة دفق الفيديو وظيفة ifState () {var state = videoOsource.ReadyState if (state === 4) {// 状态为 4 即可播放 videoplayer ()} آخر {$ ('. play-sym-wrapper'). إزالة () $ $ ('الجسم'). fstate ، 10)}} setTimeout (ifstate ، 10)تم الانتهاء من جزء التحكم الأساسي. تتحقق الوظائف الأساسية لمشغل الفيديو بأكمله.
ما سبق هو كل محتويات هذا المقال.