مقدمة إلى المكون الإضافي لتشغيل الفيديو بتنسيق 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 لتعيين بعض المعلمات. وغني عن القول أن المصدر يشير إلى الترجمة.

بهذه الطريقة يخرج الأمر، لكن في الواقع لدينا احتياجات أخرى.

أنت بحاجة إلى تطبيق novtt's js، الموجود في الملف البديل الخاص بالعرض التوضيحي. بهذه الطريقة لن يظهر تحديد الحرف في شريط التحكم بالفيديو. بالطبع لم تعد بحاجة إلى عنصر المسار في الصفحة.

 <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-js vjs-default-skin ملصق vjs-fluid=http://vjs.zencdn.net/v/oceans.png العرض=375 الارتفاع=200 عناصر التحكم التحميل المسبق=لا شيء data-setup=' { html5 : { originalTextTracks : خطأ } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> يجب تمكين JavaScript لتشغيل مقاطع الفيديو. يوصى باستخدام متصفح <a href=http://videojs.com/html5-video-support/ target=_blank> الذي يدعم HTML5<. /أ> للوصول. </p> </فيديو>

الاهتمام بالحدث:

نحن نركز عمومًا على الأحداث الثلاثة: البداية والتوقف المؤقت والنهاية

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // إذا كنت لا تثق في التشغيل التلقائي لسبب ما }) player.on('play', function () { console.log('بدء/استئناف التشغيل'); }); player.on('pause', function () { console.log('إيقاف التشغيل مؤقتًا'); }); player.on('end', function () { console.log('انتهى التشغيل'); });

هناك أيضًا أحداث التحديث:

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

يمكنك تحديد ما إذا كان الفيديو سينتهي من خلال الحكم على ما إذا كان الوقت الحالي والوقت الإجمالي متساويين:

 player.on('timeupdate', function () { // إذا كانcurrentTime() === المدة()، فقد انتهى تشغيل الفيديو if (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، نوع المحتوى: فيديو/ogg

تنسيق webm هو الامتداد: .webm، نوع المحتوى: فيديو/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, flash, تقنيات أخرى مدعومة]});

القاعدة الافتراضية هنا هي أنه سيتم استخدام التقنية الأولى للعب، وإذا فشلت، سيتم استخدام الخيارات اللاحقة. على سبيل المثال، إذا تمت كتابة html5 في المقام الأول أعلاه، فسيتم تشغيل جميع مقاطع الفيديو باستخدام html5. إذا أردنا أن يأخذ الفلاش الأولوية، فما عليك سوى وضعه في المقدمة:

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

ستجد في عناصر الصفحة أن video.js يمنحنا كائن الفلاش الذي نستخدمه.

أضف سمة التشغيل التلقائي إلى عنصر الفيديو، أو أضف التشغيل التلقائي: صحيح إلى js

 <معرف الفيديو=ملصق التشغيل التلقائي للفيديو=/images/bk.png width=375 height=200 عناصر التحكم التحميل المسبق=none > </video>

أو

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // التأمين، يمكنك أيضًا استدعاء play( ) });

التشغيل التلقائي مزعج دائمًا، لذا فإن العكس هو حذف خاصية التشغيل التلقائي أو ضبطها على خطأ.

آخر:

يدعم video.js المكونات الإضافية الإضافية، وهي مريحة جدًا للاستخدام.

 // تحديد وظيفة المكون الإضافي examplePlugin(options) { this.on('play', function (e) { console.log('لقد بدأ التشغيل!'); }); } // تسجيل videojs.plugin(' examplePlugin' , examplePlugin // استخدم player.examplePlugin({ exampleOption: true });

يمكن استدعاء واجهة برمجة التطبيقات (API) الخاصة بالمشغل مباشرة داخل المكون الإضافي. يوجد مكون إضافي لقائمة التشغيل يمكنك دراسته إذا كنت بحاجة إلى قائمة تشغيل. https://github.com/brightcove/videojs-playlist و http://videojs.com/advanced/ لهما هذا التأثير:

ما ورد أعلاه هو مقدمة للمكون الإضافي لتشغيل الفيديو بتنسيق HTML5 video.js الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!