تنزيل video.js - تنزيل كود المصدر video.js

video.js

شفرة المصدر الأخرى

Unknown

تنزيل

Video.js® - مشغل فيديو الويب

Video.js هو مشغل فيديو كامل المواصفات ومفتوح المصدر لجميع الأنظمة الأساسية المستندة إلى الويب.

بمجرد إخراج المنتج من الصندوق، يدعم Video.js جميع تنسيقات الوسائط الشائعة المستخدمة على الويب بما في ذلك تنسيقات البث مثل HLS وDASH. إنه يعمل على أجهزة الكمبيوتر المكتبية والأجهزة المحمولة والأجهزة اللوحية وأجهزة التلفزيون الذكية المستندة إلى الويب. يمكن توسيعه وتخصيصه بشكل أكبر من خلال نظام بيئي قوي من المكونات الإضافية.

بدأ تشغيل Video.js في منتصف عام 2010 ويتم استخدامه الآن في أكثر من عام ~~50.000~~ ~~100.000~~ ~~200000~~ ~~400000~~ ~~700000~~ 800.000 موقع.

جدول المحتويات

بداية سريعة
المساهمة
مدونة لقواعد السلوك
رخصة

بداية سريعة

بفضل الأشخاص الرائعين في Fastly، هناك إصدار مجاني مستضاف على شبكة CDN من Video.js يمكن لأي شخص استخدامه. أضف هذه العلامات إلى <head> في مستندك:

 < link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " > </ script >

وبدلاً من ذلك، يمكنك تضمين Video.js عن طريق الحصول عليه من npm، أو تنزيله من إصدارات GitHub أو عن طريق تضمينه عبر unpkg أو JavaScript CDN آخر، مثل CDNjs.

 <!-- unpkg : use the latest version of Video.js -->
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " > </ script >

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " > </ script >

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " > </ script >

بعد ذلك، يعد استخدام Video.js أمرًا بسيطًا مثل إنشاء عنصر <video> ، ولكن مع سمة data-setup إضافية. كحد أدنى، يجب أن تحتوي هذه السمة على قيمة '{}' ، ولكن يمكن أن تتضمن أي خيارات Video.js - فقط تأكد من أنها تحتوي على JSON صالح!

 < video
    id =" my-player "
    class =" video-js "
    controls
    preload =" auto "
    poster =" //vjs.zencdn.net/v/oceans.png "
    data-setup =' {} ' >
  < source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " > </ source >
  < p class =" vjs-no-js " >
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    < a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
      supports HTML5 video
    </ a >
  </ p >
</ video >

عند تحميل الصفحة، سيجد Video.js هذا العنصر ويقوم تلقائيًا بإعداد مشغل في مكانه.

إذا كنت لا تريد استخدام الإعداد التلقائي، فيمكنك ترك سمة data-setup وتهيئة عنصر <video> يدويًا باستخدام وظيفة videojs :

 var player = videojs ( 'my-player' ) ;

تقبل وظيفة videojs أيضًا كائن options ورد اتصال ليتم استدعاؤه عندما يكون المشغل جاهزًا:

 var options = { } ;

var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
  videojs . log ( 'Your player is ready!' ) ;

  // In this context, `this` is the player that was created by Video.js.
  this . play ( ) ;

  // How about an event listener?
  this . on ( 'ended' , function ( ) {
    videojs . log ( 'Awww...over so soon?!' ) ;
  } ) ;
} ) ;

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

المساهمة

Video.js هي مكتبة مجانية ومفتوحة المصدر، ونحن نقدر أي مساعدة ترغب في تقديمها - سواء كانت إصلاح الأخطاء، أو تحسين الوثائق، أو اقتراح ميزات جديدة. تحقق من دليل المساهمة للمزيد!

يستخدم Video.js BrowserStack لاختبار التوافق.