Commit f4631b48

VID-8 Player page now supports showing some information about videos

When the page loads, a request will be placed for a file called {{details.json}} within the video's directory. If this exists, it's contents will be used to populate the page title and a description section.

Generating the JSON can be done trivially in a JSON shell: {noformat}

import json s = { 'title' : 'Repaired Generator first run', 'description' : 'First start of a Performance Power generator following replacement of the running capacitor' } json.dumps(s) '{"description": "First start of a Performance Power generator following replacement of the running capacitor", "title": "Repaired Generator first run"}' {noformat}

The result of this can be viewed at https://videos.bentasker.co.uk/Player.html?url=2018/03/20180327_genny_run/VID_20190327.mp4_master.m3u8

Javascript and CSS have also now been broken out into external files so that the size of the player page itself is minimal (currently 840b)

Commit f4631b48.

Authored 2019-03-30T10:42:04.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+131 lines -84 lines

Changes

diff --git a/Player.html b/Player.html
--- a/Player.html
+++ b/Player.html

# @@ -1,90 +1,8 @@

# <html>

# <head>

# <script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"></script>

# - <style type="text/css">

# - #videobar {

# - background: white;

# - border-bottom: 1px solid #888;

# - margin-bottom: 5px;

# - overflow: hidden;

# - text-overflow: ellipsis;

# - margin: auto;

# - font-size: 0.8em;

# - text-align: left;

# - }

# -

# - #vbartext {

# - background: #C5C5C5;

# - padding: 10px;

# - border-bottom: 1px solid #888;

# - color: #000;

# - font-weight: bold;

# - }

# -

# - #vbartext a {

# - color: #000;

# - text-decoration: none;

# - }

# -

# - #embedsect {

# - padding: 9px 12px;

# - white-space: pre;

# - word-break: normal;

# - border: 1px solid #cccccc;

# - -moz-border-radius: 3px 3px 3px 3px;

# - border-radius: 3px 3px 3px 3px;

# - margin: 9px 0;

# - border-width: 1px;

# - max-height: 30em;

# - overflow: auto;

# - text-align: left;

# - }

# -

# - </style>

# -

# - <script type="text/javascript">

# - 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);

# - }

# -

# - // Get the video path from the request URL

# - const urlParams = new URLSearchParams(window.location.search);

# - vidurl = urlParams.get('url');

# -

# - document.addEventListener("DOMContentLoaded", function(event) {

# - d = document.getElementById('embedsecturl');

# - // It's basically userinput, so escape it

# - t = document.createTextNode(vidurl);

# - d.innerHTML = '';

# - d.appendChild(t);

# -

# - var t2 = t.cloneNode(true);

# - document.getElementById('title').appendChild(t2);

# - });

# -

# - </script>

# + <link rel="stylesheet" href="/resources/css/player/player.css" />

# + <script type="text/javascript" src="/resources/js/player/player.js"></script>

# </head>

# <body>

# @@ -104,6 +22,10 @@

#   <script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.js"></script>

#   <script type="text/javascript">embedBensPlayer('<span id='embedsecturl'></span>');</script>>

# </div></div>

# +

# + <div id="description"></div>

# </div>

# </center>

diff --git a/resources/css/player/player.css b/resources/css/player/player.css
--- a/resources/css/player/player.css
+++ b/resources/css/player/player.css

# @@ -0,0 +1,39 @@

# +#videobar {

# + background: white;

# + border-bottom: 1px solid #888;

# + margin-bottom: 5px;

# + overflow: hidden;

# + text-overflow: ellipsis;

# + margin: auto;

# + font-size: 0.8em;

# + text-align: left;

# +}

# +

# +#vbartext {

# + background: #C5C5C5;

# + padding: 10px;

# + border-bottom: 1px solid #888;

# + color: #000;

# + font-weight: bold;

# +}

# +

# +#vbartext a {

# + color: #000;

# + text-decoration: none;

# +}

# +

# +#embedsect {

# + padding: 9px 12px;

# + white-space: pre;

# + word-break: normal;

# + border: 1px solid #cccccc;

# + -moz-border-radius: 3px 3px 3px 3px;

# + border-radius: 3px 3px 3px 3px;

# + margin: 9px 0;

# + border-width: 1px;

# + max-height: 30em;

# + overflow: auto;

# + text-align: left;

# +}

# +

# \ No newline at end of file

diff --git a/resources/index.html b/resources/index.html
--- a/resources/index.html
+++ b/resources/index.html

diff --git a/resources/js/player/player.js b/resources/js/player/player.js
--- a/resources/js/player/player.js
+++ b/resources/js/player/player.js

# @@ -0,0 +1,86 @@

# +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);

# +}

# +

# +// Get the video path from the request URL

# +const urlParams = new URLSearchParams(window.location.search);

# +vidurl = urlParams.get('url');

# +dirname = vidurl.match(/.*\//);

# +

# +// Trigger a XMLHTTP request to see if the video has an info manifest

# +fetchPage('/'+dirname+'details.json',writeDetails,function(e){});

# +

# +document.addEventListener("DOMContentLoaded", function(event) {

# + 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);

# + }

# +});

# +

# \ No newline at end of file

Websites / videos.bentasker.co.uk: f4631b48

VID-8 Player page now supports showing some information about videos

Changes