project Websites / videos.bentasker.co.uk avatar

Websites / videos.bentasker.co.uk: 5112e2da

CDN-13 Create initial embed script and a test page

CDN-13 Create initial embed script and a test page

Commit 5112e2da.

Authored 2019-03-27T11:59:06.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+129 lines -0 lines

Changes

diff --git a/resources/embed/embed.js b/resources/embed/embed.js
--- a/resources/embed/embed.js
+++ b/resources/embed/embed.js
# @@ -0,0 +1,112 @@
# +
# +
# +function cE(t){
# + return document.createElement(t);
# +}
# +
# +
# +// From https://stackoverflow.com/a/19757717
# +document.write=function(s){
# + var scripts = document.getElementsByTagName('script');
# + var lastScript = scripts[scripts.length-1];
# + lastScript.insertAdjacentHTML("beforebegin", s);
# +}
# +
# +
# +
# +function embedBensPlayer(vidurl,vidtype){
# +
# + if (vidtype == undefined){
# + vidtype="application/x-mpegURL";
# + }
# +
# +
# + document.write("<div id='BensplayerWrapper' class='BensVideoCont'></div>");
# + var c = document.getElementById('BensplayerWrapper');
# +
# + // First thing we need to do is get the player files loaded
# +
# + var e = cE('link');
# + e.setAttribute('rel','stylesheet');
# + e.setAttribute('href','https://videos.bentasker.co.uk/resources/js/videojs/video-js.min.css');
# + c.appendChild(e);
# +
# +
# + window.playerSettings = { 'vidtype': vidtype, 'vidurl': vidurl }
# +
# +
# + // We then trigger the next steps in stages to make sure everything that needs to be loaded, is
# + loadVJS();
# +}
# +
# +
# +function writePlayer(){
# +
# +
# + // TODO: Be good to make this one conditional. Detect whether we've either been passed a list, or a M3U file and not load playlist
# + // if not needed
# + /*
# + var e = cE('script');
# + e.setAttribute('type','text/javascript');
# + e.setAttribute('src','https://videos.bentasker.co.uk/resources/js/playlist/videojs-playlist.js');
# + c.appendChild(e);
# + */
# +
# + // Get the width of our parent container to set video width later
# + var c = document.getElementById('BensplayerWrapper');
# + var width = c.parentNode.clientWidth
# +
# +
# +
# +
# + // Now start setting up the player itself
# + var d = cE('div');
# + d.id = "videowrapper";
# +
# + v = cE('video');
# + v.setAttribute('id','video');
# + v.setAttribute('class','video-js');
# + v.setAttribute('controls','');
# + v.setAttribute('preload','auto');
# + v.setAttribute('width',width);
# +
# + // now create the source
# + var src = cE('source');
# + src.setAttribute('src',window.playerSettings['vidurl']);
# + src.setAttribute('type',window.playerSettings['vidtype']);
# +
# + v.appendChild(src);
# + d.appendChild(v);
# +
# + c.appendChild(d);
# +
# + var s = cE('script');
# + s.setAttribute('type','text/javascript');
# + s.innerHTML = "window.player = videojs('video',\"{'fluid':true}\", function onPlayerReady(){console.log('Player Ready');});"
# +
# +
# + c.appendChild(s);
# +}
# +
# +
# +function loadVJS(){
# + var c = document.getElementById('BensplayerWrapper');
# + var e = cE('script');
# + e.setAttribute('type','text/javascript');
# + e.setAttribute('src','https://videos.bentasker.co.uk/resources/js/videojs/video.min.js');
# + e.onload = function () { loadVJSHLS(); };
# + c.appendChild(e);
# +
# +}
# +
# +
# +function loadVJSHLS(){
# + var c = document.getElementById('BensplayerWrapper');
# + var e = cE('script');
# + e.setAttribute('type','text/javascript');
# + e.setAttribute('src','https://videos.bentasker.co.uk/resources/js/videojs-contrib-hls.js');
# + e.onload = function () { writePlayer(); };
# + c.appendChild(e);
# +}
# +
# +
#
diff --git a/resources/test.html b/resources/test.html
--- a/resources/test.html
+++ b/resources/test.html
# @@ -0,0 +1,17 @@
# +<html>
# +<head>
# +</head>
# +<body>
# +<h1>Test Page</h1>
# +
# +This is a meaningless page just used for testing JS changes
# +
# +
# +
# +<div style="width: 600px">
# +<script type="text/javascript" src="embed/embed.js"></script>
# +<script type="text/javascript">embedBensPlayer('https://videos.bentasker.co.uk/2017/20170111-noisy-bearing/noisy_bearing.mp4_master.m3u8');</script>
# +</div>
# +
# +</body>
# +</html>
# \ No newline at end of file
#