videojs for live

diff --git a/teleforma/templates/teleforma/course_conference.html b/teleforma/templates/teleforma/course_conference.html
index 99aca695201f47bd3178656d13c5d488b0ca51e7..c49971e8a5035bed2fc3cea3d90447b39a1dc7c2 100644 (file)
--- a/teleforma/templates/teleforma/course_conference.html
+++ b/teleforma/templates/teleforma/course_conference.html
@@ -47,9 +47,28 @@
     {% for livestream in livestreams %}
         {% if "webm" == livestream.stream_type %}
             <div class="video">
-                <video width="100%" height="auto" controls>
-                    <source src="{{ livestream.url|get_host:host }}" type="video/webm" />
+                <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">
+                <video
+                    id="video"
+                    class="video-js vjs-theme-fantasy"
+                    controls
+                    preload="auto"
+                    width="100%"
+                    height="auto"
+                    data-setup="{}"
+                    autoplay>
+
+                  <source id="videosource" src="{{ livestream.url }}" type="video/webm" />
+                    <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>
             </div>
         {% endif %}
     {% endfor %}