link
شرح مشغل الويب Video.js وتخصيص تصميم بالـ CSS

share comment link more_horiz


Video.js هي إظافة معروفة كمشغل فيديو للويب بعد ظهور HTML5 حيث لم يكن تشغيل الفيديو ممكنا قبلا إلى باستعمال تقنية الفلاش المليئة بالعيوب والثغرات.




  طريقة إظافة الأداة بسيطة نستعمل الشكل التالي عموما -الإصدار الحالي هو 5-:

<head>
  <link href="https://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet">
</head>

 <body> 
   <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
      controls preload="none" poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJB0ampV7T_N0J4Q8JNSGAi8OBaE6jtnsZnxu7j_1X-iX_MiKhUnXhZxcZZ150CEXHQAa0sqWkUfxQ0qnlIWM5Qhr9ATJKlRL8WG1F1SEYG0mFbjbtDTuqH_A-U8mdBLvgeIGrHDRGE8/w640-c-h267/graphic-designer-1288477.jpg'
      data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  </video> 

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://vjs.zencdn.net/5-unsafe/video.js"></script> 
</body>


لإستدعاء بارتباط

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

لوضع الفيديو وصورة الفيديو نستعمل التنسيق التالي:

<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="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

مثال مع تنسيقات CSS مخصصة:



مثال بالتنسيقات الإفتراضية:






mohamadlounnas

ليس لدى mohamadlounnas معلومات تعريفية أخرى للمزيد عن هذا الناشر أو التواصل يمكنك مراسلته عبر حسابه.

chatالتعليقات

Comments

Post a Comment