Commit a5245936

VID-5 Add M3U playlist support

This is an initial and quite basic implementation, so has a number of caveats

Support for playlist-ui hasn't been added yet, so no playlist related controls (including next/previous) are exposed
If tokenisation is enabled server side, playback will fail - we only currently mint a token for the M3U itself
External (i.e. non videos.bentasker.co.uk) files can be played from the playlist (this is probably a good thing)
If the video items path starts with "/" the current domain name (i.e. {{window.location.hostname}}) will be prepended. This will be wrong in the majority of situations but acts as a placeholder

Also adds a M3U which was used for testing

Authored 2019-12-15T12:22:21.000+00:00 by B Tasker in project Websites / videos.bentasker.co.uk

+99 lines -5 lines

Changes

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

# @@ -91,6 +91,15 @@ function guessMimeFromUrl(vidurl){

# return 'audio/wav';

# break;

# + case 'ts':

# + return 'video/mp2t';

# + break;

# +

# + case 'm3u':

# + // videojs can't handle these. VID-5 implements support

# + return 'special/m3uplaylist';

# + break;

# +

# default:

# console.log("Calculating mimetime failed for " + vidurl + " ext: " + ext.toLowerCase());

# return 'video/mp4';

# @@ -227,11 +236,13 @@ function writePlayer(vidid,playerSettings){

# v.setAttribute('width',width);

# // now create the source

# - var src = cE('source');

# - src.setAttribute('src',playerSettings['vidurl']);

# - src.setAttribute('type',playerSettings['vidtype']);

# -

# - v.appendChild(src);

# + if (window.playerSettings['vidtype'] != "special/m3uplaylist"){

# + var src = cE('source');

# + src.setAttribute('src',playerSettings['vidurl']);

# + src.setAttribute('type',playerSettings['vidtype']);

# + v.appendChild(src);

# + }

# +

# d.appendChild(v);

# c.appendChild(d);

# @@ -244,6 +255,13 @@ function writePlayer(vidid,playerSettings){

# c.appendChild(s);

# + if (window.playerSettings['vidtype'] == "special/m3uplaylist"){

# + // The player now exists, so we need to build the playlist

# + fetchM3U(playerSettings['vidurl'],vidid);

# + }

# +

# // VID-9 check for metadata and write schema.org markup if it exists

# dirname = playerSettings['vidurl'].match(/.*\//);

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

# @@ -258,6 +276,9 @@ function loadVJS(vidid,playerSettings){

# if (window.playerSettings['vidtype'] == "application/x-mpegURL"){

# e.onload = function () { loadVJSHLS(vidid,playerSettings); };

# +

# + }else if (window.playerSettings['vidtype'] == "special/m3uplaylist"){

# + e.onload = function () { loadVJSM3U(vidid,playerSettings); };

# }else{

# e.onload = function () { writePlayer(vidid,playerSettings); };

# }

# @@ -266,6 +287,16 @@ function loadVJS(vidid,playerSettings){

# }

# +function loadVJSM3U(vidid,playerSettings){

# + var c = document.getElementById('BensplayerWrapper'+vidid);

# + var e = cE('script');

# + e.setAttribute('type','text/javascript');

# + e.setAttribute('src',window.BensPD + 'resources/js/playlist/videojs-playlist.js');

# + e.onload = function () { writePlayer(vidid,playerSettings); };

# + c.appendChild(e);

# +}

# +

# function loadVJSHLS(vidid,playerSettings){

# var c = document.getElementById('BensplayerWrapper'+vidid);

# var e = cE('script');

# @@ -300,6 +331,63 @@ function fetchPage(url,callback,errcallback,storage){

# xmlhttp.send();

# }

# +// VID-5 M3U support

# +function fetchM3U(vidurl,vidid){

# + window.videoListid = vidid; // This'll prevent multi-player support for M3Us, but that can be fixed later

# + var oReq = new XMLHttpRequest();

# + oReq.addEventListener("load", parseM3U);

# + oReq.open("GET", vidurl);

# + oReq.send();

# +}

# +

# +function parseM3U(){

# + window.videoList = [];

# + lines = this.responseText.split('\n');

# + domain = window.location.hostname;

# + var o;

# + for (var i=0; i<lines.length; i++){

# +

# + if (lines[i][0] == "#" || lines[i] == ""){

# + // It's a comment/metadata, skip

# + continue;

# + }

# +

# + segs = lines[i].split(".")

# + ext = segs[segs.length - 1].toLowerCase()

# +

# + // Don't include M3Us, the player will bork

# + if (ext != "m3u"){

# +

# + playpath = lines[i]

# + if (lines[i][0] == "/"){

# + // relative URL, prepend the current domain

# + // Todo: should really make this the domain of the playlist

# + playpath = 'https://'+domain+lines[i];

# + }

# +

# + o = {

# + sources : [

# + {

# + src: playpath,

# + type: guessMimeFromUrl(lines[i])

# + }

# + ]

# + }

# + window.videoList.push(o);

# + }

# +

# + vidid = window.videoListid;

# +

# + var s = cE('script');

# + s.setAttribute('type','text/javascript');

# + ss = "window.player" + vidid +".playlist(window.videoList); window.player" + vidid +".playlist.autoadvance(0);window.player" + vidid +".playlist.first();";

# + s.innerHTML = ss;

# +

# + var c = document.getElementById('BensVideo'+vidid);

# + c.appendChild(s);

# +}

# +

# function embedFailedNotif(vidid){

# s = cE('img');

diff --git a/resources/tests/vid5-test2.m3u b/resources/tests/vid5-test2.m3u
--- a/resources/tests/vid5-test2.m3u
+++ b/resources/tests/vid5-test2.m3u

# @@ -0,0 +1,6 @@

# +#EXTM3U

# +https://videos.bentasker.co.uk/2018/03/201803-trivium_oh_fuck.mp3

# +https://videos.bentasker.co.uk//2019/07/bow_before_me/bow_before_me.mp4

# +https://videos.bentasker.co.uk/2018/07/201807-car-launch/launch.mp4

# +https://videos.bentasker.co.uk/2019/05/20190528_matt_heafy_claire_birthday/Matt_Heafy_Claire_Birthday_Message.mp4

# +

Websites / videos.bentasker.co.uk: a5245936

VID-5 Add M3U playlist support

Changes