web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-23 02:04:34 +02:00
Code Releases Activity
v8.12.0
video.js/sandbox/middleware-play.html.example

153 lines
4.4 KiB
Plaintext
Raw Permalink Normal View History

feat: add mediator middleware type for play() (#4868) This will allow middleware to interact with calls to play() from the tech. This will require a method of indicating to middleware previously run that a middleware down the chain has terminated or stopped execution. * Adds middleware mediator method that runs middleware from the player to the tech and a second time back up to the player. This category was created because play is both a setter(changes the playback state) and a getter(gets a native play promise if available). This also has the ability to tell whether a middleware has terminated before reaching the tech. * Adds a middleware.TERMINATOR sentinel value that is available on the videojs object * Adds play to the allowedMediators * Adds paused to the allowedGetters * Adds a sandbox example of a play mediator middleware
2018-01-30 18:30:42 +02:00
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<!-- Load the source files -->
chore: move scss grunt tasks to npm scripts (#5520)
2018-10-25 21:45:08 +02:00
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
feat: add mediator middleware type for play() (#4868) This will allow middleware to interact with calls to play() from the tech. This will require a method of indicating to middleware previously run that a middleware down the chain has terminated or stopped execution. * Adds middleware mediator method that runs middleware from the player to the tech and a second time back up to the player. This category was created because play is both a setter(changes the playback state) and a getter(gets a native play promise if available). This also has the ability to tell whether a middleware has terminated before reaching the tech. * Adds a middleware.TERMINATOR sentinel value that is available on the videojs object * Adds play to the allowedMediators * Adds paused to the allowedGetters * Adds a sandbox example of a play mediator middleware
2018-01-30 18:30:42 +02:00
<script src="../dist/video.js"></script>
<style>
.terminate-btn {
margin: 2em 1em;
}
.terminated .vjs-progress-control .vjs-play-progress {
background: red;
}
</style>
</head>
<body>
<video id="vid1" class="video-js" lang="en" controls poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
<source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
</video>
<input id="stateToggle" type="checkbox" class="terminate-btn">
Terminate the play/pause middleware
</input>
<script>
var stateToggle = document.getElementById('stateToggle');
// Middleware 1
var m1 = function(player) {
return {
// Mediating play to the tech
callPlay: function() {
if (stateToggle.checked) {
console.log('Middleware 1: Play is set to terminate');
player.addClass('terminated');
return videojs.middleware.TERMINATOR;
} else {
console.log('Middleware 1: Play has been called');
player.removeClass('terminated');
}
},
// Mediating the results back to the player
play: function(cancelled, value) {
console.log('Middleware 1: play got from tech. What is the value passed?', value);
// Handle the promise if it is returned
if(value && value.then) {
value.then(() => {
console.log('Middleware 1: Promise resolved.')
})
.catch((err) => {
console.log('Middleware 1: Promise rejected.');
});
}
if (cancelled) {
console.log('Middleware 1: play has been cancelled prior to this middleware');
}
},
// Mediating to tech
callPause: function() {
if (stateToggle.checked) {
console.log('Middleware 1: Pause is set to terminate');
player.addClass('terminated');
return videojs.middleware.TERMINATOR;
} else {
console.log('Middleware 1: Pause has been called');
player.removeClass('terminated');
}
},
// Mediating the results back to the player
pause: function(cancelled, value) {
console.log('Middleware 1: pause got back from tech. What is the value passed?', value);
if (cancelled) {
console.log('Middleware 1: pause has been cancelled prior to this middleware');
}
return value;
},
// Required for middleware. Simply passes along the source
setSource: function(srcObj, next) {
next(null, srcObj);
}
};
};
// Middleware 2
var m2 = function(player) {
return {
callPlay: function() {
console.log('Middleware 2: play has been called');
},
play: function(cancelled, value) {
console.log('Middleware 2: got play from tech. What is the value passed?', value);
if (cancelled) {
console.log('Middleware 2: play has been cancelled prior to this middleware');
}
return value;
},
callPause: function() {
console.log('Middleware 2: pause has been called');
},
pause: function(cancelled, value) {
console.log('Middleware 2: got pause from tech. What is the value passed?', value);
if (cancelled) {
console.log('Middleware 2: pause has been cancelled prior to this middleware');
}
return value;
},
setSource: function(srcObj, next) {
next(null, srcObj);
}
};
}
videojs.use('*', m1);
videojs.use('*', m2);
// Initial set-up
var vid = document.getElementById("vid1");
var player = videojs(vid);
console.log('Calling play...');
player.setTimeout(() => {
player.play()
.then(() => {
console.log('The promise resolved, we are playing.');
},
(err) => {
console.log('The promise was rejected, we failed to play.');
});
}, 500);
</script>
</body>
</html>
Copy Permalink