BBC Video Context - How Tos

[pietrop]

BBC Video Context - How Tos

[emettely]

Are there any known issues around laggy playback? We will need to look at this in more detail, but noticed it when trying out an electron app version of Digital Paper Edit.

[pietrop]

1. total duration

Get the time at which the last node in the current internal timeline finishes playing.

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
console.log(ctx.duration); //prints 0

var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);

console.log(ctx.duration); //prints 10

ctx.play();

From the docs .duration

2. get current time

.currentTime

Get how far through the internal timeline has been played.
Getting this value will give the current playhead position. Can be used for updating timelines.

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);
ctx.play();
setTimeout(() => console.log(ctx.currentTime),1000); //should print roughly 1.0

ca probably use registerCallback to listen for time change? (not sure exactly how)

Register a callback to listen to one of the events defined in VideoContext.EVENTS

3. flatten the progress bar

🤷‍♂ - see @melnyczuk 's PR #41 & #41 (comment)

4 . set current time

How to make the BBC Video context jump to a specific point, eg equivalent of .currentTime =

Similarly to .currentTime in HTML5 media, it can be used both as a get and as a set,

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(20);
ctx.currentTime = 10; // seek 10 seconds in
ctx.play();https://github.com/bbc/digital-paper-edit-client/issues/45#

from BBC Video Context .currentTime docs.

5. update playlist

Maybe is a matter of calling/exposing loadPlaylist outside of the component
(/bbc/digital-paper-edit-client/src/Components/PaperEdits/PaperEdit/ProgramScript/PreviewCanvas/VideoContextViewer.js#L35)

However it might be necessary to clear the nodes in the timeline first.

The VideoContext now also has a reset() method, which as well as automatically calling destroy on all nodes will also remove all callbacks registered to the VideoContext.

from bbc/VideoContext#37 (comment)

Destroy all nodes in the graph and reset the timeline. After calling this any created nodes will be unusable.

from docs reset()

Other

Other interesting once found in the docs, that can be useful to improve the preview player functionalities

• playbackRate
• volume