addons/webinterface.default/videoPlayer.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="utf-8">
   5     <title>Chorus Video Player</title>
   6
   7     <link href="lib/video-js/video-js.min.css" rel="stylesheet">
   8     <link href="lib/video-js/plugins/videojs-chromecast/videojs-chromecast.css?01217" rel="stylesheet">
   9
  10     <script src="lib/jquery/jquery-3.5.1.min.js"></script>
  11     <script type="text/javascript" src="lib/video-js/plugins/videojs-chromecast/cast_sender.js"></script>
  12
  13     <script>
  14
  15         // Helpers.
  16         function getParameterByName(name) {
  17             name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  18             var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
  19                     results = regex.exec(location.search);
  20             return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  21         }
  22         function getBaseURL() {
  23             var parts = window.location.href.split('videoPlayer.html');
  24             return parts[0].replace(/\/\s*$/, '');
  25         }
  26
  27         // Vars.
  28         var src = getParameterByName('src'),
  29           player = getParameterByName('player'),
  30           yt = getParameterByName('yt'),
  31           bg = getParameterByName('bg'),
  32           $player = $('<div>'),
  33           width = '100%',
  34           height = '90%',
  35           id = "videoplayer";
  36
  37         // Do we have something to play?
  38         if(src != ''){
  39
  40             // Make the html5 player
  41             if(player == 'html5'){
  42                 $player = $('<video>', {
  43                     "id": id,
  44                     "class": "video-js vjs-default-skin",
  45                     "controls": "controls",
  46                     "preload": "auto",
  47                     "autoplay": "autoplay",
  48                     "data-setup": JSON.stringify({}),
  49                     "poster": getBaseURL() + bg
  50                 });
  51                 $player.append($('<source>', {
  52                     "type": 'video/mp4',
  53                     "src": getBaseURL() + '/' + src
  54                 }));
  55                 $player.attr('width', width).attr('height', height);
  56             }
  57
  58             // Make the VLC player.
  59             if(player == 'vlc'){
  60                 $player = $('<embed>', {
  61                     "type": "application/x-vlc-plugin",
  62                     "pluginspage": "http://www.videolan.org",
  63                     "version": "VideoLAN.VLCPlugin.2",
  64                     "width": width,
  65                     "height": height,
  66                     "target": '/' + src,
  67                     "id": id
  68                 });
  69             }
  70
  71             // Make the divX player.
  72             if(player == 'divx'){
  73                 $player = $('<object>', {
  74                     "id": id,
  75                     "classid": "clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616",
  76                     "width": width,
  77                     "height": height,
  78                     "codebase": "http://go.divx.com/plugin/DivXBrowserPlugin.cab"
  79                 });
  80                 $player.append($('<param>', {name: 'custommode', value: 'none'}));
  81                 $player.append($('<param>', {name: 'previewImage', value: ''}));
  82                 $player.append($('<param>', {name: 'autoPlay', value: 'true'}));
  83                 $player.append($('<param>', {name: 'src', value: '/' + src}));
  84                 $player.append($('<embed>', {
  85                     type: 'video/divx',
  86                     src: '/' + src,
  87                     custommode: 'none',
  88                     width: width,
  89                     height: height,
  90                     autoplay: "true",
  91                     previewImage: '',
  92                     pluginspage: 'http://go.divx.com/plugin/download/'
  93                 }));
  94             }
  95
  96             // Dom ready actions.
  97             $(document).ready(function(){
  98
  99                 // update download link
 100                 $('.dl').attr('href', src);
 101
 102                 $('#stream').click(function(e){
 103                     e.preventDefault($(this).attr('href'));
 104                     console.log($(this).attr('href'));
 105                     window.location = $(this).attr('href');
 106                 });
 107
 108                 // Switch player.
 109                 $('#switch-player')
 110                   .val(player)
 111                   .on('change', function(e){
 112                     var url = 'videoPlayer.html?player=' + $(this).val() + '&src=' + encodeURIComponent(src) + '&bg=' + encodeURIComponent(bg);
 113                     window.location = url;
 114                   });
 115
 116             });
 117         }
 118         else if (yt != '') {
 119             // If playing a youtube video.
 120             $player = $('<iframe>', {
 121                 width: width,
 122                 height: height,
 123                 src: 'https://www.youtube.com/embed/' + yt  + '?rel=0&amp;showinfo=0&amp;autoplay=1&amp;iv_load_policy=3',
 124                 frameborder: 0,
 125                 allowfullscreen: 'allowfullscreen',
 126                 allow: 'autoplay; encrypted-media'
 127             });
 128             $(document).ready(function(){
 129                $('#switch-player').empty();
 130                $('#download').empty();
 131             });
 132         }
 133     </script>
 134     <style type="text/css">
 135         body, html {
 136             height: 100%;
 137         }
 138         body {
 139             margin: 0; background: #000; padding: 0; overflow: hidden; color: #333;
 140         }
 141         a {
 142             color: #333;
 143             text-decoration: none;
 144         }
 145         #player {
 146             margin: 0px 10px 0;
 147             height: 98%;
 148             margin-top: 1%;
 149         }
 150         #switch-player,
 151         #actions {
 152             display: block;
 153             font: 12px Arial, Helvetica, "Nimbus Sans L", sans-serif;
 154             margin: 1px 0 0;
 155             padding: 5px 10px 0 0;
 156             float: right;
 157         }
 158         #switch-player {
 159             float: left;
 160             padding: 5px 0 0 10px;
 161         }
 162         select:hover,
 163         .dl:hover {
 164             color: #aaa;
 165         }
 166         #videoplayer {
 167             min-height: 300px;
 168         }
 169         select {
 170             float: right;
 171             background: #000;
 172             border: none;
 173             color: #333;
 174         }
 175         select:focus {
 176             color: #aaa;
 177         }
 178         #player {
 179             position: relative;
 180             padding-bottom: 56.25%; /* 16:9 */
 181             padding-top: 25px;
 182             height: 0;
 183         }
 184         #player iframe,
 185         #player .video-js {
 186             position: absolute;
 187             top: 0;
 188             left: 0;
 189             width: 100%;
 190             height: 100%;
 191             border: none;
 192         }
 193         .vjs-error .vjs-error-display .vjs-modal-dialog-content {
 194             background: rgba(0,0,0,0.5);
 195             height: auto;
 196             font-size: 1.7em;
 197             padding: 2% 15%;
 198             top: auto;
 199             bottom: 5%;
 200         }
 201         .vjs-error .vjs-error-display:before {
 202             display: none;
 203         }
 204     </style>
 205 </head>
 206 <body>
 207     <div class="player-wrapper">
 208         <div id="player">
 209         </div>
 210         <div id="player-actions">
 211             <div id="actions">
 212                 <a href="" title="Force download of this video" class="dl" id="download" download>Download</a> -
 213                 <a href="" title="Navigate to video so the browser can try and native stream it. Some browsers may still download" class="dl" id="stream">Stream</a>
 214             </div>
 215             <select id="switch-player">
 216                 <option value="html5">html5</option>
 217                 <option value="vlc">VLC Web player</option>
 218                 <option value="divx">DivX Webplayer</option>
 219             </select>
 220         </div>
 221     </div>
 222     <script> $('#player').prepend($player);</script>
 223     <script src="lib/video-js/video.min.js"></script>
 224     <script src="lib/video-js/plugins/videojs-chromecast/videojs-chromecast.min.js"></script>
 225 </body>
 226 </html>