From: Guillaume Pellerin <guillaume.pellerin@parisson.com>
Date: Sat, 8 Feb 2025 13:23:25 +0000 (+0100)
Subject: videojs for live
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=0349e92c69635ed13d9156ca7a3ef02ef278d26b;p=teleforma.git

videojs for live
---

diff --git a/teleforma/templates/teleforma/course_conference.html b/teleforma/templates/teleforma/course_conference.html
index 99aca695..c49971e8 100644
--- 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 %}