project Websites / videos.bentasker.co.uk avatar

Websites / videos.bentasker.co.uk: b04a57e1

VID-4 enable support for embedding multiple players into the same page

VID-4 enable support for embedding multiple players into the same page

Commit b04a57e1.

Authored 2019-03-27T13:43:39.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+53 lines -19 lines

Changes

diff --git a/resources/embed/embed.js b/resources/embed/embed.js
--- a/resources/embed/embed.js
+++ b/resources/embed/embed.js
# @@ -1,4 +1,4 @@
# -
# +window.BensPlayerInstances = (window.BensPlayerInstances === undefined) ? [] : window.BensPlayerInstances;
#
# function cE(t){
# return document.createElement(t);
# @@ -20,6 +20,16 @@ function embedBensPlayer(vidurl,vidtype){
# vidtype="application/x-mpegURL";
# }
#
# + var vidid = 0;
# +
# + while (true){
# + if (window.BensPlayerInstances.includes(vidid)){
# + vidid++;
# + }else{
# + window.BensPlayerInstances.push(vidid);
# + break;
# + }
# + }
#
# // We do this for 2 reasons
# //
# @@ -30,8 +40,8 @@ function embedBensPlayer(vidurl,vidtype){
# vidurl = "https://videos.bentasker.co.uk/" + vidurl;
# }
#
# - document.write("<div id='BensplayerWrapper' class='BensVideoCont'></div>");
# - var c = document.getElementById('BensplayerWrapper');
# + document.write("<div id='BensplayerWrapper" + vidid + "' class='BensVideoCont'></div>");
# + var c = document.getElementById('BensplayerWrapper'+vidid);
#
# // First thing we need to do is get the player files loaded
#
# @@ -41,15 +51,15 @@ function embedBensPlayer(vidurl,vidtype){
# c.appendChild(e);
#
#
# - window.playerSettings = { 'vidtype': vidtype, 'vidurl': vidurl }
# + playerSettings = { 'vidtype': vidtype, 'vidurl': vidurl}
#
#
# // We then trigger the next steps in stages to make sure everything that needs to be loaded, is
# - loadVJS();
# + loadVJS(vidid,playerSettings);
# }
#
#
# -function writePlayer(){
# +function writePlayer(vidid,playerSettings){
#
#
# // 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
# @@ -62,7 +72,7 @@ function writePlayer(){
# */
#
# // Get the width of our parent container to set video width later
# - var c = document.getElementById('BensplayerWrapper');
# + var c = document.getElementById('BensplayerWrapper'+vidid);
# var width = c.parentNode.clientWidth
#
#
# @@ -70,10 +80,10 @@ function writePlayer(){
#
# // Now start setting up the player itself
# var d = cE('div');
# - d.id = "videowrapper";
# + d.id = "videowrapper"+vidid;
#
# v = cE('video');
# - v.setAttribute('id','video');
# + v.setAttribute('id','BensVideo' + vidid);
# v.setAttribute('class','video-js');
# v.setAttribute('controls','');
# v.setAttribute('preload','auto');
# @@ -81,8 +91,8 @@ function writePlayer(){
#
# // now create the source
# var src = cE('source');
# - src.setAttribute('src',window.playerSettings['vidurl']);
# - src.setAttribute('type',window.playerSettings['vidtype']);
# + src.setAttribute('src',playerSettings['vidurl']);
# + src.setAttribute('type',playerSettings['vidtype']);
#
# v.appendChild(src);
# d.appendChild(v);
# @@ -91,35 +101,35 @@ function writePlayer(){
#
# var s = cE('script');
# s.setAttribute('type','text/javascript');
# - s.innerHTML = "window.player = videojs('video',\"{'fluid':true}\", function onPlayerReady(){console.log('Player Ready');});"
# + s.innerHTML = "window.player" + vidid +" = videojs('BensVideo" + vidid + "',\"{'fluid':true}\", function onPlayerReady(){console.log('Player Ready');});"
#
#
# c.appendChild(s);
# }
#
#
# -function loadVJS(){
# - var c = document.getElementById('BensplayerWrapper');
# +function loadVJS(vidid,playerSettings){
# + var c = document.getElementById('BensplayerWrapper'+vidid);
# var e = cE('script');
# e.setAttribute('type','text/javascript');
# e.setAttribute('src','https://videos.bentasker.co.uk/resources/js/videojs/video.min.js');
#
# if (window.playerSettings['vidtype'] == "application/x-mpegURL"){
# - e.onload = function () { loadVJSHLS(); };
# + e.onload = function () { loadVJSHLS(vidid,playerSettings); };
# }else{
# - e.onload = function () { writePlayer(); };
# + e.onload = function () { writePlayer(vidid,playerSettings); };
# }
# c.appendChild(e);
#
# }
#
#
# -function loadVJSHLS(){
# - var c = document.getElementById('BensplayerWrapper');
# +function loadVJSHLS(vidid,playerSettings){
# + var c = document.getElementById('BensplayerWrapper'+vidid);
# var e = cE('script');
# e.setAttribute('type','text/javascript');
# e.setAttribute('src','https://videos.bentasker.co.uk/resources/js/videojs-contrib-hls.min.js');
# - e.onload = function () { writePlayer(); };
# + e.onload = function () { writePlayer(vidid,playerSettings); };
# c.appendChild(e);
# }
#
#
diff --git a/resources/tests/vid_4_multi_embed_test.html b/resources/tests/vid_4_multi_embed_test.html
--- a/resources/tests/vid_4_multi_embed_test.html
+++ b/resources/tests/vid_4_multi_embed_test.html
# @@ -0,0 +1,24 @@
# +<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="https://videos.bentasker.co.uk/resources/embed/embed.js?v=0.12"></script>
# +<script type="text/javascript">embedBensPlayer('https://videos.bentasker.co.uk/2017/20170111-noisy-bearing/noisy_bearing.mp4_master.m3u8');</script>
# +</div>
# +
# +
# +<div style="width: 600px">
# +<script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js?v=0.12"></script>
# +<script type="text/javascript">embedBensPlayer('2018/03/201803-trivium_oh_fuck.mp3','audio/mpeg');</script>
# +</div>
# +
# +
# +</body>
# +</html>
# \ No newline at end of file
#