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>لإستدعاء بارتباط
<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 مخصصة:
مثال بالتنسيقات الإفتراضية:
chatالتعليقات
Comments
Post a Comment