summaryrefslogtreecommitdiff
path: root/javascript/videojs/sandbox/middleware-play.html.example
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/videojs/sandbox/middleware-play.html.example')
-rw-r--r--javascript/videojs/sandbox/middleware-play.html.example152
1 files changed, 0 insertions, 152 deletions
diff --git a/javascript/videojs/sandbox/middleware-play.html.example b/javascript/videojs/sandbox/middleware-play.html.example
deleted file mode 100644
index ebe0748..0000000
--- a/javascript/videojs/sandbox/middleware-play.html.example
+++ /dev/null
@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-<head>
- <meta charset="utf-8" />
- <title>Video.js Sandbox</title>
-
- <!-- Load the source files -->
- <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
- <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>