use videojs custom player

diff --git a/teleforma/templates/teleforma/course_media.html b/teleforma/templates/teleforma/course_media.html
index 87b8034f680727fc6740b46360c8019845529d55..f0fd92e1e9e9451ceff6286174fa0f879403533e 100644 (file)
--- a/teleforma/templates/teleforma/course_media.html
+++ b/teleforma/templates/teleforma/course_media.html
@@ -94,9 +94,38 @@ $(document).ready(function(){
 
 {% if "video" in media.mime_type %}
 <div class="video">
-    <video id="my_video_1" class="video-js vjs-default-skin" width="864" height="480" controls preload="auto" data-setup='{}' {% if media.poster_file %}{% thumbnail media.poster_file "640" as im %}poster="{{ im.url }}"{% endthumbnail %}{% endif %}>
-        <source src="{{ MEDIA_URL }}{{ media.file }}" type="{{ media.mime_type }}" />
+    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.css">
+    <video
+        id="my_video_1"
+        class="video-js vjs-theme-fantasy"
+        controls
+        preload="none"
+        width="100%"
+        height="auto"
+        data-setup='{"playbackRates": [1, 1.25, 1.5, 2]}'
+        {% if media.poster_file %}{% thumbnail media.poster_file '640' as im %}poster="{{ im.url }}"{% endthumbnail %}{% endif %}
+        >
+            <source src="{% url 'teleforma-media-stream' period.id media.id %}" type="{{ media.mime_type }}" />
+        <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>
+    <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.min.js"></script>
+    <script>
+      var player = videojs('my_video_1');
+
+      player.seekButtons({
+        forward: 10,
+        back: 10
+      });
+    </script>
 </div>
 
 {% elif "audio" in media.mime_type %}