Player do includu

templates/includes/player.html.ep

+<script src="/js/video.min.js"></script>
+% if ( $live ) {
+<script src="/js/videojs-contrib-quality-levels.min.js"></script>
+<script src="/js/videojs-hls-quality-selector.min.js"></script>
+% } else {
+<script src="/js/flv.min.js"></script>
+<script src="/js/videojs-flvjs.min.js"></script>
+% }
+
+<video
+ id="player"
+ class="video-js vjs-default-skin"
+ preload="auto"
+ poster="/img/poster.jpg"
+ controls
+>
+<source src="<%= $src %>" type="<%= $live ? 'application/x-mpegURL':'video/flv' %>" />
+</video>
+</div>
+
+<script>
+
+var player = videojs('#player',{
+  autoplay: true,
+  crossOrigin: '*',
+  html5: {
+    nativeControlsForTouch: true,
+    hls: {
+      overrideNative: !videojs.browser.IS_SAFARI,
+    },
+  },
+});
+% if ( $live ) {
+player.hlsQualitySelector();
+% }
+
+player.ready(function() {
+    console.log(this.options()); //log all of the default videojs options
+    // Make up an aspect ratio
+    var aspectRatio = 9/16;
+
+    function resizeVideoJS(){
+        var width = document.getElementById(player.id()).parentElement.offsetWidth;
+        player.width(width );
+        player.height( width * aspectRatio );
+    }
+
+    resizeVideoJS();
+    window.onresize = resizeVideoJS;
+});
+
+</script>
+

templates/stream/player.html.ep

 % layout 'default';
 % title $c->stash->{stream}{name};
-
-<h1 class="container container--default pt-4 lg:pb-4 bg-grey-300 text-grey-100 head-alt-base"><%= $c->stash->{stream}{name} %></h1>
-
-<script src="/js/video.min.js"></script>
-<script src="/js/videojs-contrib-quality-levels.min.js"></script>
-<script src="/js/videojs-hls-quality-selector.min.js"></script>
-
-% if ( $c->stash->{stream}{is_live} ) {
-<video
- id="player"
- class="video-js vjs-default-skin"
- preload="auto"
- poster="/img/poster.jpg"
- controls
->
-<source src="/hls/<%= $c->stash->{stream}{key} %>.m3u8" type="application/x-mpegURL" />
-</video>
-</div>
-
-<script>
-
-var player = videojs('#player',{
-  autoplay: true,
-  crossOrigin: '*',
-  html5: {
-    nativeControlsForTouch: true,
-    hls: {
-      overrideNative: !videojs.browser.IS_SAFARI,
-    },
-  },
-});
-player.hlsQualitySelector();
-
-player.ready(function() {
-    console.log(this.options()); //log all of the default videojs options
-    // Make up an aspect ratio
-    var aspectRatio = 9/16;
-
-    function resizeVideoJS(){
-        var width = document.getElementById(player.id()).parentElement.offsetWidth;
-        player.width(width );
-        player.height( width * aspectRatio );
-    }
-
-    resizeVideoJS();
-    window.onresize = resizeVideoJS;
-});
-
-</script>
-% }
+%= include 'includes/player', src => $url, live => 1;