Update video
This commit is contained in:
parent
57bc1e0a9f
commit
a61d2fabcd
|
@ -22,7 +22,7 @@
|
|||
if (app.ports !== undefined && app.ports.registerVideo !== undefined) {
|
||||
app.ports.registerVideo.subscribe(function(args) {
|
||||
window.scrollTo(0, 0);
|
||||
var time = parseInt(args[2], 10) || undefined;
|
||||
var time = vd.parseTime(args[2]) || undefined;
|
||||
|
||||
requestAnimationFrame(function() {
|
||||
if (args[0] !== lastId) {
|
||||
|
@ -30,7 +30,7 @@
|
|||
|
||||
player = vd.setup(args[0], {
|
||||
v: args[1] + "/manifest.mpd",
|
||||
t: parseInt(args[2], 10) || 0,
|
||||
t: time,
|
||||
focus: true
|
||||
});
|
||||
} else if (time !== undefined ){
|
||||
|
|
171
js/vd.js
171
js/vd.js
|
@ -107,53 +107,7 @@ const vd = (function() {
|
|||
return position;
|
||||
}
|
||||
|
||||
function setupRepresentations(menuButton, player) {
|
||||
|
||||
let hls = player.tech({IWillNotUseThisInPlugins: true}).hls;
|
||||
|
||||
if (hls === undefined) {
|
||||
setTimeout(() => setupRepresentations(menuButton, player), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
let representations = hls.representations();
|
||||
representations.sort((a, b) => b.height - a.height);
|
||||
|
||||
menuButton.menu.items = [];
|
||||
menuButton.menu.addAndRecordItem = function(item) {
|
||||
this.addItem(item);
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
menuButton.menu.addAndRecordItem(new MenuItem(player, { label: "auto", menuButton }));
|
||||
for (let representation of representations) {
|
||||
menuButton.menu.addAndRecordItem(new MenuItem(player, {
|
||||
label: representation.height + "p",
|
||||
representation,
|
||||
menuButton
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function setupSpeed(menuButton, player) {
|
||||
let speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
|
||||
menuButton.updateLabel('x1');
|
||||
menuButton.menu.items = [];
|
||||
menuButton.menu.addAndRecordItem = function(item) {
|
||||
this.addItem(item);
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
for (let speed of speeds) {
|
||||
menuButton.menu.addAndRecordItem(new SpeedItem(player, {
|
||||
label: "x" + speed,
|
||||
speed,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
let vjs = {};
|
||||
|
||||
vjs.Component = videojs.getComponent('Component');
|
||||
vjs.Menu = videojs.getComponent('Menu');
|
||||
vjs.MenuButton = videojs.getComponent('MenuButton');
|
||||
|
@ -163,7 +117,7 @@ const vd = (function() {
|
|||
|
||||
constructor(player, options) {
|
||||
super(player, options);
|
||||
this.updateLabel('auto');
|
||||
this.updateLabel(options === undefined ? "" : options.label || "");
|
||||
}
|
||||
|
||||
createEl() {
|
||||
|
@ -207,7 +161,7 @@ const vd = (function() {
|
|||
|
||||
}
|
||||
|
||||
class MenuItem extends vjs.MenuItem {
|
||||
class ResolutionItem extends vjs.MenuItem {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.representation = arguments[1].representation;
|
||||
|
@ -274,6 +228,114 @@ const vd = (function() {
|
|||
}
|
||||
}
|
||||
|
||||
function createRepresentationButtons(player, menuButton = undefined) {
|
||||
if (menuButton === undefined) {
|
||||
menuButton = new MenuButton(player);
|
||||
menuButton.updateLabel("auto");
|
||||
}
|
||||
|
||||
let hls = player.tech({IWillNotUseThisInPlugins: true}).hls;
|
||||
|
||||
if (hls === undefined) {
|
||||
setTimeout(() => createRepresentationButtons(player, menuButton), 500);
|
||||
return menuButton;
|
||||
}
|
||||
|
||||
let representations = hls.representations();
|
||||
representations.sort((a, b) => b.height - a.height);
|
||||
|
||||
menuButton.menu.items = [];
|
||||
menuButton.menu.addAndRecordItem = function(item) {
|
||||
this.addItem(item);
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
menuButton.menu.addAndRecordItem(new ResolutionItem(player, { label: "auto", menuButton }));
|
||||
for (let representation of representations) {
|
||||
menuButton.menu.addAndRecordItem(new ResolutionItem(player, {
|
||||
label: representation.height + "p",
|
||||
representation,
|
||||
menuButton
|
||||
}));
|
||||
}
|
||||
|
||||
return menuButton;
|
||||
}
|
||||
|
||||
function createSpeedButtons(player) {
|
||||
let menuButton = new MenuButton(player);
|
||||
|
||||
let speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
|
||||
menuButton.updateLabel('x1');
|
||||
menuButton.menu.items = [];
|
||||
menuButton.menu.addAndRecordItem = function(item) {
|
||||
this.addItem(item);
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
for (let speed of speeds) {
|
||||
menuButton.menu.addAndRecordItem(new SpeedItem(player, {
|
||||
label: "x" + speed,
|
||||
speed,
|
||||
}));
|
||||
}
|
||||
|
||||
return menuButton;
|
||||
}
|
||||
|
||||
vd.parseTime = function(t) {
|
||||
let parsed = 1 * t;
|
||||
|
||||
if (!isNaN(parsed)) {
|
||||
return parsed;
|
||||
}
|
||||
|
||||
// Compute the split
|
||||
let split = t.split("h");
|
||||
|
||||
let hours;
|
||||
let minutes;
|
||||
let seconds;
|
||||
|
||||
switch (split.length) {
|
||||
case 1:
|
||||
hours = 0;
|
||||
split = split[0].split("m");
|
||||
break;
|
||||
case 2:
|
||||
hours = 1 * split[0];
|
||||
if (isNaN(hours)) {
|
||||
return NaN;
|
||||
}
|
||||
split = split[1].split("m");
|
||||
break;
|
||||
default:
|
||||
return NaN;
|
||||
}
|
||||
|
||||
switch (split.length) {
|
||||
case 1:
|
||||
minutes = 0;
|
||||
split = split[0].split("s");
|
||||
break;
|
||||
case 2:
|
||||
minutes = 1 * split[0];
|
||||
if (isNaN(minutes)) {
|
||||
return NaN;
|
||||
}
|
||||
split = split[1].split("s");
|
||||
break;
|
||||
default:
|
||||
return NaN;
|
||||
}
|
||||
|
||||
seconds = 1 * split[0];
|
||||
if ((split.length !== 1 && (! (split.length == 2 && split[1] === ""))) || isNaN(seconds)) {
|
||||
return NaN;
|
||||
}
|
||||
|
||||
return 3600 * hours + 60 * minutes + seconds;
|
||||
}
|
||||
|
||||
vd.setup = function(video, args) {
|
||||
|
||||
|
@ -340,7 +402,7 @@ const vd = (function() {
|
|||
};
|
||||
|
||||
if (args.t !== undefined) {
|
||||
let time = parseFloat(args.t);
|
||||
let time = vd.parseTime(args.t);
|
||||
if (!isNaN(time)) {
|
||||
player.currentTime(time);
|
||||
}
|
||||
|
@ -459,16 +521,13 @@ const vd = (function() {
|
|||
let controlBar = player.getChild('controlBar');
|
||||
let fullscreenButton = controlBar.children()[controlBar.children().length - 1];
|
||||
controlBar.removeChild(fullscreenButton);
|
||||
let menuButton = new MenuButton(player);
|
||||
let speedButton = new MenuButton(player);
|
||||
|
||||
let menuButton = createRepresentationButtons(player);
|
||||
let speedButton = createSpeedButtons(player);
|
||||
controlBar.addChild(speedButton, {});
|
||||
controlBar.addChild(menuButton, {});
|
||||
controlBar.addChild(fullscreenButton, {});
|
||||
|
||||
setupSpeed(speedButton, player);
|
||||
setupRepresentations(menuButton, player);
|
||||
|
||||
// videojs.Html5DashJS.hook('beforeinitialize', (p, mp) => setupRepresentations(menuButton, p, mp));
|
||||
window.player = player;
|
||||
|
||||
if (video.getAttribute('autoplay') != undefined) {
|
||||
|
@ -485,6 +544,6 @@ const vd = (function() {
|
|||
}
|
||||
}
|
||||
|
||||
return vd;
|
||||
|
||||
return vd;
|
||||
})();
|
||||
|
|
|
@ -185,11 +185,11 @@ update msg model =
|
|||
( [], Dict.empty )
|
||||
|
||||
time =
|
||||
case Maybe.map String.toInt (Dict.get "t" args) of
|
||||
Just (Just 0) ->
|
||||
case Dict.get "t" args of
|
||||
Just "0" ->
|
||||
Nothing
|
||||
|
||||
Just (Just t) ->
|
||||
Just t ->
|
||||
Just t
|
||||
|
||||
_ ->
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
port module Ports exposing (eraseVideo, registerVideo)
|
||||
|
||||
|
||||
port registerVideo : ( String, String, Maybe Int ) -> Cmd msg
|
||||
port registerVideo : ( String, String, Maybe String ) -> Cmd msg
|
||||
|
||||
|
||||
port eraseVideo : () -> Cmd msg
|
||||
|
|
Loading…
Reference in New Issue