project Websites / videos.bentasker.co.uk avatar

Websites / videos.bentasker.co.uk: 0206e591

verified

Switch player pages to using the new embed methodology

Switch player pages to using the new embed methodology

Commit 0206e591.

Authored 2022-03-11T18:42:04.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+120 lines -10 lines

Commit Signature

Changes

diff --git a/Player.html b/Player.html
--- a/Player.html
+++ b/Player.html
# @@ -2,14 +2,14 @@
# <head>
# <script type="text/javascript" src="/resources/embed/embed.min.js"></script>
# <link rel="stylesheet" href="/resources/css/player/player.css" />
# - <script type="text/javascript" src="/resources/js/player/player.js"></script>
# + <script type="text/javascript" src="/resources/js/player/player_div.js"></script>
# </head>
# <body>
#
# <center>
# <h1 id="title"></h1>
# <div id="maincontainer" style="width: 50%; height: 50%">
# - <script type="text/javascript">embedBensPlayer(vidurl);</script>
# + <div id="embeddiv" class="embedBensPlayer"></div>
# <div id="videobar">
# <div id="vbartext">
# <a href="#" onclick="return toggleembed();">Embed Video</a>
# @@ -20,8 +20,9 @@
#
# <div id="embedsect" style="display: none" onclick="selectText('embedsect')">&lt;div style="width: 60%"&gt;
# &nbsp; &lt;div class="embedBensPlayer" data-src='<span id='embedsecturl'></span>'&gt;&lt;/div&gt;
# -&lt;/div&gt;
# +
# &nbsp; &lt;script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.min.js"&gt;&lt;/script&gt;
# + &lt;/div&gt;
# </div>
#
#
#
diff --git a/resources/js/player/player_div.js b/resources/js/player/player_div.js
--- a/resources/js/player/player_div.js
+++ b/resources/js/player/player_div.js
# @@ -0,0 +1,109 @@
# +function toggleembed(){
# + var d = document.getElementById('embedsect');
# + if (d.style.display == 'none'){
# + d.style.display = 'block';
# + }else{
# + d.style.display = 'none';
# + }
# +}
# +
# +// From https://stackoverflow.com/a/1173319
# +function selectText(containerid) {
# + if (document.selection) { // IE
# + var range = document.body.createTextRange();
# + range.moveToElementText(document.getElementById(containerid));
# + range.select();
# + } else if (window.getSelection) {
# + var range = document.createRange();
# + range.selectNode(document.getElementById(containerid));
# + window.getSelection().removeAllRanges();
# + window.getSelection().addRange(range);
# + }
# +}
# +
# +// https://snippets.bentasker.co.uk/page-1708042214-Place-AJAX-GET-request-and-trigger-callback-function-with-result-Javascript.html
# +function fetchPage(url,callback,errcallback){
# + var xmlhttp;
# + if (window.XMLHttpRequest){
# + // code for IE7+, Firefox, Chrome, Opera, Safari
# + xmlhttp=new XMLHttpRequest();
# + }else{
# + // code for IE6, IE5 (why am I still supporting these? Die... Die.... Die....
# + xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
# + }
# +
# + xmlhttp.onreadystatechange=function(){
# + if (xmlhttp.readyState==4){
# + if(xmlhttp.status==200){
# + callback(xmlhttp.responseText)
# + }else{
# + errcallback(xmlhttp.responseText)
# + }
# +
# +} }
# +
# + xmlhttp.open("GET",url,true);
# + xmlhttp.send();
# +}
# +
# +
# +function writeDetails(response){
# + var j = JSON.parse(response);
# +
# + var t = document.createTextNode(j['title']);
# + var h = document.getElementById('title');
# + h.innerHTML = '';
# + h.appendChild(t);
# +
# + var d = document.createTextNode(j['description']);
# + document.getElementById('description').appendChild(d);
# +}
# +
# +// https://snippets.bentasker.co.uk/page-2112301800-Run-javascript-on-document-ready-Javascript.html
# +function doDocumentReady(fn){
# + /* $(document).ready() without javascript
# + */
# + if (document.readyState === "complete" ||
# + (document.readyState !== "loading" && !document.documentElement.doScroll)
# + ) {
# + fn();
# + } else {
# + document.addEventListener("DOMContentLoaded", fn);
# + }
# +}
# +
# +
# +function pageReadyCall(){
# + const urlParams = new URLSearchParams(window.location.search);
# + vidurl = urlParams.get('url');
# + dirname = vidurl.match(/.*\//);
# +
# + // embed the video
# + document.getElementById("embeddiv").setAttribute("data-src", vidurl);
# + doDocumentReady(embedBensPlayerDivs);
# +
# + // Trigger a XMLHTTP request to see if the video has an info manifest
# + fetchPage('/'+dirname+'details.json',writeDetails,function(e){});
# + d = document.getElementById('embedsecturl');
# + // It's basically userinput, so escape it
# + t = document.createTextNode(vidurl);
# + d.innerHTML = '';
# + d.appendChild(t);
# +
# + h = document.getElementById('title');
# + if (h.innerHTML == ''){
# + var t2 = t.cloneNode(true);
# + h.appendChild(t2);
# + }
# +}
# +
# +
# +
# +// Get the video path from the request URL
# +const urlParams = new URLSearchParams(window.location.search);
# +vidurl = urlParams.get('url');
# +
# +// Don't bother trying to load the player if no URL was given
# +if (vidurl){
# + doDocumentReady(pageReadyCall);
# +}
#
diff --git a/resources/tests/Player_VNext_div.html b/resources/tests/Player_VNext_div.html
--- a/resources/tests/Player_VNext_div.html
+++ b/resources/tests/Player_VNext_div.html
# @@ -2,16 +2,14 @@
# <head>
# <script type="text/javascript" src="/resources/embed/embed.vnext.js"></script>
# <link rel="stylesheet" href="/resources/css/player/player.css" />
# - <script type="text/javascript" src="/resources/js/player/player.js"></script>
# + <script type="text/javascript" src="/resources/js/player/player_div.js"></script>
# </head>
# <body>
#
# <center>
# <h1 id="title"></h1>
# <div id="maincontainer" style="width: 50%; height: 50%">
# - <div class="embedBensPlayer" data-src="2017/201705_Lua_split_string/lua_string_split.mp4_master.m3u8"></div>
# -
# - <!-- <script type="text/javascript">embedBensPlayer(vidurl);</script> -->
# + <div id="embeddiv" class="embedBensPlayer"></div>
# <div id="videobar">
# <div id="vbartext">
# <a href="#" onclick="return toggleembed();">Embed Video</a>
# @@ -21,9 +19,11 @@
#
#
# <div id="embedsect" style="display: none" onclick="selectText('embedsect')">&lt;div style="width: 60%"&gt;
# - &nbsp; &lt;script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"&gt;&lt;/script&gt;
# - &nbsp; &lt;script type="text/javascript"&gt;embedBensPlayer('<span id='embedsecturl'></span>');&lt;/script>&gt;
# - &lt;/div&gt;</div>
# + &nbsp; &lt;div class="embedBensPlayer" data-src='<span id='embedsecturl'></span>'&gt;&lt;/div&gt;
# +
# + &nbsp; &lt;script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.min.js"&gt;&lt;/script&gt;
# + &lt;/div&gt;
# +</div>
#
#
#
#