diff options
Diffstat (limited to 'javascript/videojs/sandbox')
30 files changed, 2586 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/autoplay-tests.html.example b/javascript/videojs/sandbox/autoplay-tests.html.example new file mode 100644 index 0000000..77d28cb --- /dev/null +++ b/javascript/videojs/sandbox/autoplay-tests.html.example @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../node_modules/es6-shim/es6-shim.min.js"></script> + <script src="../dist/video.js"></script> +<style>p{margin: 0; padding:0}</style> +</head> +<body> + <div id="fixture"> + </div> + <div id="start-test"> + <video id='start-test-video' height=264 width=640 src="https://vjs.zencdn.net/v/oceans.mp4" controls></video> + <p>Press play on the video to start tests. (as we need user permission to autoplay)</p> + </div> + <script> + /* globals */ + var startTestEl = document.getElementById('start-test') + var startTestVideo = document.getElementById('start-test-video') + var testSrc = {src: startTestVideo.src, type: 'video/mp4'}; + var baseTests = []; + var setFirstFail = function(player) { + var oldPlay = player.tech_.play; + var fail = true; + + player.tech_.play = function() { + if (fail) { + fail = false; + return window.Promise.reject(); + } + + return oldPlay.call(player.tech_); + }; + }; + var noop = function() {}; + ['any-first-fail', 'any', 'play', 'muted', true].forEach(function(name) { + var val = (name === 'any-first-fail') ? 'any' : name; + var firstFail = (name === 'any-first-fail') ? setFirstFail : noop; + + var fn = function(player) { + player.autoplay(val); + }; + + baseTests.push({name: 'option-' + name, beforeSrc: firstFail, options: {autoplay: val}}); + baseTests.push({name: 'before-src-' + name, beforeSrc: function(player) { + firstFail(player); + fn(player); + }}); + baseTests.push({name: 'after-src-' + name, beforeSrc: firstFail, afterSrc: fn}); + baseTests.push({name: 'on-ready-' + name, beforeSrc: firstFail, onReady: fn}); + }); + + var appendLine = function(line) { + var el = document.createElement('p'); + + el.innerText = line; + console.log(line); + fixture.appendChild(el); + }; + + var runTests; + + startTestVideo.addEventListener('play', function() { + startTestVideo.load(); + startTestVideo.src = testSrc.src; + startTestEl.style.display = 'none'; + runTests(); + }); + + runTests = function() { + var fixture = document.getElementById('fixture'); + + while(fixture.firstChild) { + fixture.removeChild(fixture.firstChild); + } + + var tests = baseTests.slice(0); + var failure = 0; + var success = 0; + var total = tests.length; + var runTest; + + var finishTest = function(name, pass) { + if (pass) { + success++; + } else { + failure++; + } + appendLine((pass ? 'success' : 'failure') + ' - ' + name); + + if ((success + failure) === total) { + startTestEl.style.display = ''; + appendLine(success + ' of ' + total + ' succeeded'); + } else { + runTest(); + } + } + + runTest = function() { + var test = tests.shift(); + var video = document.createElement('video'); + + video.setAttribute('class', 'video-js'); + video.setAttribute('id', test.name); + video.setAttribute('controls', true); + + fixture.appendChild(video); + + var player = window.player = videojs(video, test.options); + + if (test.onReady) { + test.onReady(player); + } + + if (test.beforeSrc) { + test.beforeSrc(player); + } + + player.src(testSrc); + + if (test.afterSrc) { + test.afterSrc(player); + } + player.setTimeout(function() { + player.dispose(); + window.player = null; + finishTest(test.name, false); + }, 5000); + + player.on('timeupdate', function() { + if (player.currentTime() > 0) { + player.dispose(); + window.player = null; + finishTest(test.name, true); + } + }); + }; + runTest(); + }; + + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/combined-tracks.html.example b/javascript/videojs/sandbox/combined-tracks.html.example new file mode 100644 index 0000000..511ebfe --- /dev/null +++ b/javascript/videojs/sandbox/combined-tracks.html.example @@ -0,0 +1,59 @@ +<!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> + +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the combined-tracks.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/combined-tracks.html</pre> + </div> + + <video id="vid1" class="video-js" lang="en" controls preload="auto" width="640" height="360" 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"> + <track kind="captions" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"> + <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"> + <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"> + <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video> + <p>This player has the captions-only captionsButton, the subtiles-only subtitlesButton and the subsCapsButton which shows both kinds. Typically you'll use either just the subsCapsButton alone, or one or both of the captionsButton and subtitlesButton.</p> + <script> + var vid = document.getElementById("vid1"); + var player = videojs(vid, { + controlBar: { + children: [ + 'playToggle', + 'volumePanel', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay', + 'progressControl', + 'liveDisplay', + 'remainingTimeDisplay', + 'customControlSpacer', + 'playbackRateMenuButton', + 'chaptersButton', + 'descriptionsButton', + 'subtitlesButton', + 'captionsButton', + 'subsCapsButton', + 'audioTrackButton', + 'fullscreenToggle' + ] + } + }); + console.log(player.language()); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/debug.html.example b/javascript/videojs/sandbox/debug.html.example new file mode 100644 index 0000000..b4766ed --- /dev/null +++ b/javascript/videojs/sandbox/debug.html.example @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <style type="text/css"> + #intro { + width: 938px; + background-color: #eee; + border: 1px solid #777; + padding: 0 10px; + margin-bottom: 20px; + line-height: 1.5em; + } + + #source-form { + width: 938px; + padding: 10px 10px 0; + border: 1px solid #777; + margin: 0 0 20px; + } + + #source-form > div { + margin: 0 0 12px; + overflow: hidden; + } + + #source-form label { + float: left; + width: 200px; + } + + #source-form input[type="text"], + #source-form select { + float: left; + } + + #source-form input[type="text"] { + width: 700px; + } + </style> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/alt/video.debug.js"></script> +</head> +<body> + <div id="intro"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/debug.html</pre> + </div> + + <form id="source-form"> + <div> + <label for="source">Set Media Source URL</label> + <input type="text" id="source" value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"> + </div> + <div> + <label for="source-type">Set Media Source Type</label> + <select id="source-type"> + <option value="">None</option> + <option value="video/mp4">MP4 (video/mp4)</option> + <option selected value="application/x-mpegurl">HLS (application/x-mpegurl)</option> + <option value="application/dash+xml">DASH (application/dash+xml)</option> + </select> + </div> + <div> + <button type="submit">Set</button> + </div> + </form> + + <video-js + id="debug" + controls + preload="auto" + width="960" + height="396"> + </video-js> + + <script> + const vid = document.getElementById('debug'); + const player = videojs(vid); + const form = document.getElementById('source-form'); + const sourceField = document.getElementById('source'); + const sourceTypeField = document.getElementById('source-type'); + + const setSource = () => { + const source = { + src: sourceField.value, + type: sourceTypeField.value + }; + + if (!source.type) { + delete source.type; + } + + player.log('setting source', source); + player.src(source); + }; + + form.addEventListener('submit', (e) => { + e.preventDefault(); + setSource(); + }); + + setSource(); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/descriptions.html.example b/javascript/videojs/sandbox/descriptions.html.example new file mode 100644 index 0000000..27286ff --- /dev/null +++ b/javascript/videojs/sandbox/descriptions.html.example @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Text Descriptions, Chapters & Captions Example</title> + + <!-- Load the source files --> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + +</head> +<body> + + <!-- NOTE: we have to disable native Text Track support for the HTML5 tech, + since even HTML5 video players with native Text Track support + don't currently support 'description' text tracks in any + useful way! Currently this means that iOS will not display + ANY text tracks --> + <video id="example_video_1" class="video-js" controls preload="none" width="640" height="360" + data-setup='{ "html5" : { "nativeTextTracks" : false } }' + 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"> + + <track kind="captions" src="../docs/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" default> + <track kind="captions" src="../docs/examples/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"> + + <track kind="descriptions" src="../docs/examples/elephantsdream/descriptions.en.vtt" srclang="en" label="English"> + + <track kind="chapters" src="../docs/examples/elephantsdream/chapters.en.vtt" srclang="en" label="English"> + + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video> + +</body> +</html> diff --git a/javascript/videojs/sandbox/docpip.html.example b/javascript/videojs/sandbox/docpip.html.example new file mode 100644 index 0000000..724aa58 --- /dev/null +++ b/javascript/videojs/sandbox/docpip.html.example @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + <meta http-equiv="origin-trial" content="AruMDfzKHqbkAi4xRXZRAmpUv/hnpKsuR0VB+B6S7TGJOZBQv6ZQ0jaH6+EDW1tHjwYBlBAObmYinZ/aGtaLGwQAAACYeyJvcmlnaW4iOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTgxMTMtLXZpZGVvanMtcHJldmlldy5uZXRsaWZ5LmFwcDo0NDMiLCJmZWF0dXJlIjoiRG9jdW1lbnRQaWN0dXJlSW5QaWN0dXJlQVBJIiwiZXhwaXJ5IjoxNjk0MTMxMTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=" /> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <p>Document Picture-in-Picture is available in Chrome version 111 onwards.</p> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264"></video-js> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid, { + enableDocumentPictureInPicture: true + }); + player.loadMedia({ + artist: 'Disney', + album: 'Oceans', + title: 'Oceans', + description: 'Journey in to the depths of a wonderland filled with mystery, beauty and power. Oceans is a spectacular story, narrated by Pierce Brosnan, about remarkable creatures under the sea. It\'s an unprecedented look at the lives of these elusive deepwater creatures through their own eyes. Incredible state-of-the-art-underwater filmmaking will take your breath away as you migrate with whales, swim alongside a great white shark and race with dolphins at play.', + poster: 'https://vjs.zencdn.net/v/oceans.png', + src: [{ + src: 'https://vjs.zencdn.net/v/oceans.mp4', + type: 'video/mp4', + }] + }) + + player.on(['enterpictureinpicture', 'leavepictureinpicture', 'disablepictureinpicturechanged'], e => { + console.log(e.type); + }); + player.disablePictureInPicture(true); + player.log('window.player created', player); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/double-sub-video.html.example b/javascript/videojs/sandbox/double-sub-video.html.example new file mode 100644 index 0000000..dc3dc74 --- /dev/null +++ b/javascript/videojs/sandbox/double-sub-video.html.example @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Text Descriptions, Chapters & Captions Example</title> + + <!-- Load the source files --> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + +</head> +<body> + + <!-- NOTE: we have to disable native Text Track support for the HTML5 tech, + since even HTML5 video players with native Text Track support + don't currently support 'description' text tracks in any + useful way! Currently this means that iOS will not display + ANY text tracks --> + <video id="example_video_1" class="video-js" controls preload="none" width="640" height="360" + 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"> + + <track kind="captions" src="../docs/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" default> + <track kind="captions" src="../docs/examples/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"> + <track kind="captions" src="../docs/examples/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"> + + <track kind="descriptions" src="../docs/examples/elephantsdream/descriptions.en.vtt" srclang="en" label="English"> + + <track kind="chapters" src="../docs/examples/elephantsdream/chapters.en.vtt" srclang="en" label="English"> + + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video> + <script> + var vid = document.getElementById('example_video_1'); + var player = videojs(vid, { + textTrackDisplay: { + allowMultipleShowingTracks: true + } + }); + + player.on('loadedmetadata', function() { + player.textTracks()[0].mode = 'showing'; + player.textTracks()[1].mode = 'showing'; + player.textTracks()[2].mode = 'showing'; + player.textTracks()[3].mode = 'showing'; + player.textTracks()[4].mode = 'showing'; + }); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/embeds.html.example b/javascript/videojs/sandbox/embeds.html.example new file mode 100644 index 0000000..173475c --- /dev/null +++ b/javascript/videojs/sandbox/embeds.html.example @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <script src='../node_modules/es5-shim/es5-shim.js'></script> + <script src='../node_modules/es6-shim/es6-shim.js'></script> + + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + + <style> + .source-el { background: #FF6961; } + .source-js { background: #77DD77; } + .options-src { background: #AEC6CF; } + .source-el.data-setup { background: red; } + .source-js.data-setup { background: green; } + .options-src.data-setup { background: blue; } + + .video-js { + height: 150px; + width: 300px; + } + + .wrapper { + display: grid; + margin: 0 auto; + grid-gap: 10px; + grid-template-columns: 300px 300px 300px; + } + .panel > p:first-child { + border-bottom: black 1px solid; + } + </style> +</head> +<body> + <p>All the various ways to embed and source video elements.</p> + <p>Pastel color background represent programmatic setup.</p> + <p>Vibrant color background represent data-setup.</p> + <div class="wrapper"> + <div class="panel source-el"> + <p>js setup with source element</p> + <p>video-js embed", source element</p> + <video-js id="vid01" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video-js> + <p>Video embed, source element</p> + <video id="vid11" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video> + <p>injested div el, source element</p> + <div data-vjs-player> + <video id="vid21" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video> + </div> + </div> + <div class="panel options-src"> + <p>js setup with sources options</p> + <p>video-js embed", js source</p> + <video-js id="vid05" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + </video-js> + <p>Video embed, js source</p> + <video id="vid15" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + </video> + <p>injested div el, js source</p> + <div data-vjs-player> + <video id="vid25" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png"> + </video> + </div> + </div> + <div class="panel source-js"> + <p>js setup with js method sources</p> + <p>video-js embed", js source</p> + <video-js id="vid02" class="video-js" controls> + </video-js> + <p>Video embed, js source</p> + <video id="vid12" class="video-js" controls> + </video> + <p>injested div el, js source</p> + <div data-vjs-player> + <video id="vid22" class="video-js" controls> + </video> + </div> + </div> + <div class="panel source-el data-setup"> + <p>data-setup with sourrce elements</p> + <p>video-js embed", source element</p> + <video-js id="vid03" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video-js> + <p>Video embed, source element</p> + <video id="vid13" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video> + <p>injested div el, source element</p> + <div data-vjs-player> + <video id="vid23" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> + </video> + </div> + </div> + <div class="panel options-src data-setup"> + <p>data-setup embeds with sources options</p> + <p>video-js embed", source element</p> + <video-js id="vid04" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup='{"sources": [{"src":"https://vjs.zencdn.net/v/oceans.mp4", "type":"video/mp4"}]}'> + </video-js> + <p>Video embed, source element</p> + <video id="vid14" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup='{"sources": [{"src":"https://vjs.zencdn.net/v/oceans.mp4", "type":"video/mp4"}]}'> + </video> + <p>injested div el, source element</p> + <div data-vjs-player> + <video id="vid24" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup='{"sources": [{"src":"https://vjs.zencdn.net/v/oceans.mp4", "type":"video/mp4"}]}'> + </video> + </div> + </div> + <div class="panel source-js data-setup"> + <p>js setup with js method sources</p> + <p>video-js embed", js source</p> + <video-js id="vid06" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + </video-js> + <p>Video embed, js source</p> + <video id="vid16" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + </video> + <p>injested div el, js source</p> + <div data-vjs-player> + <video id="vid26" class="video-js" controls poster="//vjs.zencdn.net/v/oceans.png" data-setup="{}"> + </video> + </div> + </div> + </div> + <script> + var player01 = videojs('vid01'); + var player11 = videojs('vid11'); + var player21 = videojs('vid21'); + var player01 = videojs('vid02'); + var player11 = videojs('vid12'); + var player21 = videojs('vid22'); + var player05 = videojs('vid05', {sources: [{src:'https://vjs.zencdn.net/v/oceans.mp4',type:'video/mp4'}]}); + var player15 = videojs('vid15', {sources: [{src:'https://vjs.zencdn.net/v/oceans.mp4',type:'video/mp4'}]}); + var player25 = videojs('vid25', {sources: [{src:'https://vjs.zencdn.net/v/oceans.mp4',type:'video/mp4'}]}); + player01.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + player11.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + player21.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + player01.poster('//vjs.zencdn.net/v/oceans.png'); + player11.poster('//vjs.zencdn.net/v/oceans.png'); + player21.poster('//vjs.zencdn.net/v/oceans.png'); + setTimeout(function() { + videojs.players.vid06 && videojs.players.vid06.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + videojs.players.vid16 && videojs.players.vid16.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + videojs.players.vid26 && videojs.players.vid26.src({src:'https://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}); + }); + </script> +</body> +</html> diff --git a/javascript/videojs/sandbox/focus-visible.html.example b/javascript/videojs/sandbox/focus-visible.html.example new file mode 100644 index 0000000..a737959 --- /dev/null +++ b/javascript/videojs/sandbox/focus-visible.html.example @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<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> + +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the focus-visible.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/focus-visible.html</pre> + </div> + + <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" + poster="https://vjs.zencdn.net/v/oceans.png" + data-setup='{"controlBar": {"volumePanel": {"inline": false}}}'> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video> + <p>This demo shows how to implement polyfill for the <b>:focus-visible</b> selector. You can read more about the polyfill <a href="https://github.com/WICG/focus-visible"> here</a>.</p> + <script> + var vid = document.getElementById("vid1"); + var player = videojs(vid); + + </script> + <script src="https://unpkg.com/focus-visible"></script> +</body> +</html> diff --git a/javascript/videojs/sandbox/hls.html.example b/javascript/videojs/sandbox/hls.html.example new file mode 100644 index 0000000..7d162e7 --- /dev/null +++ b/javascript/videojs/sandbox/hls.html.example @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p> + <pre>cp sandbox/index.html.example sandbox/index.html</pre> + <pre>npm run start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264"> + <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"> + <track kind="captions" src="../bad-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid); + + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/hotkeys.html.example b/javascript/videojs/sandbox/hotkeys.html.example new file mode 100644 index 0000000..c279aff --- /dev/null +++ b/javascript/videojs/sandbox/hotkeys.html.example @@ -0,0 +1,158 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>Video.js Hotkeys - Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + <style> + .hotkeys-function { background: #FF6961; } + .hotkeys-override { background: #77DD77; } + .hotkeys-normal { background: #AEC6CF; } + + .video-js { + height: 150px; + width: 300px; + } + + .wrapper { + display: grid; + margin: 0 auto; + grid-gap: 10px; + grid-template-columns: 300px 300px 300px; + } + .panel > p:first-child { + border-bottom: black 1px solid; + } + </style> +</head> +<body> + <h1>Video.js Hotkeys</h1> + <p>All the various ways to configure hotkeys.</p> + <div class="wrapper"> + <div class="panel hotkeys-normal"> + <p>Default (no) hotkeys</p> + <video-js + id="vid0" + controls + preload="auto" + poster="//vjs.zencdn.net/v/oceans.png"> + <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + <div class="panel hotkeys-normal"> + <p>Disable hotkeys</p> + <video-js + id="vid1" + controls + preload="auto" + poster="//vjs.zencdn.net/v/oceans.png"> + <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + <div class="panel hotkeys-normal"> + <p>Enable default hotkeys (k = play/pause, m = mute/unmute, f = fullscreen)</p> + <video-js + id="vid12" + controls + preload="auto" + poster="//vjs.zencdn.net/v/oceans.png"> + <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + <div class="panel hotkeys-function"> + <p>Custom hotkey function (x = pause, y = play)</p> + <video-js + id="vid2" + controls + preload="auto" + poster="//vjs.zencdn.net/v/oceans.png"> + <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + <div class="panel hotkeys-override"> + <p>Customize specific hotkeys (z = play/pause, v = fullscreen)</p> + <video-js + id="vid3" + controls + preload="auto" + poster="//vjs.zencdn.net/v/oceans.png"> + <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + </div> + + <script> + var player0 = videojs('vid0', {}); + + // Note that we support both explicitly disbling and explicitly enabling Hotkeys + // because one day the default may change from disabled to enabled. + var player1 = videojs('vid1', { + userActions: { + hotkeys: false + } + }); + + var player12 = videojs('vid12', { + userActions: { + hotkeys: true + } + }); + + var player2 = videojs('vid2', { + userActions: { + hotkeys: function(event) { + // `this` is the player in this context + + // `x` key = pause + if (event.which === 88) { + this.pause(); + } + // `y` key = play + if (event.which === 89) { + this.play(); + } + } + } + }); + + var player3 = videojs('vid3', { + userActions: { + hotkeys: { + playPauseKey: function(event) { + // override play/pause to trigger when pressing the z key + return (event.which === 90); + }, + muteKey: function(event) { + // disable mute key + }, + fullscreenKey: function(event) { + // override fullscreen to trigger when pressing the v key + return (event.which === 86); + } + } + } + }); + </script> +</body> +</html> diff --git a/javascript/videojs/sandbox/icons.html.example b/javascript/videojs/sandbox/icons.html.example new file mode 100644 index 0000000..7453a6d --- /dev/null +++ b/javascript/videojs/sandbox/icons.html.example @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Icons Sandbox</title> + + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + + <style> + .icon-list li span { font-size: 150% } + </style> +</head> +<body> + <h1>Video.js Icons</h1> + <p>This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.</p> + + <ul class="icon-list"> + <li><span class="vjs-icon-play"></span> <code>.vjs-icon-play</code></li> + <li><span class="vjs-icon-play-circle"></span> <code>.vjs-icon-play-circle</code></li> + <li><span class="vjs-icon-pause"></span> <code>.vjs-icon-pause</code></li> + <li><span class="vjs-icon-volume-mute"></span> <code>.vjs-icon-volume-mute</code></li> + <li><span class="vjs-icon-volume-low"></span> <code>.vjs-icon-volume-low</code></li> + <li><span class="vjs-icon-volume-mid"></span> <code>.vjs-icon-volume-mid</code></li> + <li><span class="vjs-icon-volume-high"></span> <code>.vjs-icon-volume-high</code></li> + <li><span class="vjs-icon-fullscreen-enter"></span> <code>.vjs-icon-fullscreen-enter</code></li> + <li><span class="vjs-icon-fullscreen-exit"></span> <code>.vjs-icon-fullscreen-exit</code></li> + <li><span class="vjs-icon-spinner"></span> <code>.vjs-icon-spinner</code></li> + <li><span class="vjs-icon-subtitles"></span> <code>.vjs-icon-subtitles</code></li> + <li><span class="vjs-icon-captions"></span> <code>.vjs-icon-captions</code></li> + <li><span class="vjs-icon-hd"></span> <code>.vjs-icon-hd</code></li> + <li><span class="vjs-icon-chapters"></span> <code>.vjs-icon-chapters</code></li> + <li><span class="vjs-icon-downloading"></span> <code>.vjs-icon-downloading</code></li> + <li><span class="vjs-icon-file-download"></span> <code>.vjs-icon-file-download</code></li> + <li><span class="vjs-icon-file-download-done"></span> <code>.vjs-icon-file-download-download</code></li> + <li><span class="vjs-icon-file-download-off"></span> <code>.vjs-icon-file-download-off</code></li> + <li><span class="vjs-icon-share"></span> <code>.vjs-icon-share</code></li> + <li><span class="vjs-icon-cog"></span> <code>.vjs-icon-cog</code></li> + <li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li> + <li><span class="vjs-icon-circle"></span> <code>.vjs-icon-circle</code></li> + <li><span class="vjs-icon-circle-outline"></span> <code>.vjs-icon-circle-outline</code></li> + <li><span class="vjs-icon-circle-inner-circle"></span> <code>.vjs-icon-circle-inner-circle</code></li> + <li><span class="vjs-icon-cancel"></span> <code>.vjs-icon-cancel</code></li> + <li><span class="vjs-icon-repeat"></span> <code>.vjs-icon-repeat</code></li> + <li><span class="vjs-icon-replay"></span> <code>.vjs-icon-replay</code></li> + <li><span class="vjs-icon-replay-5"></span> <code>.vjs-icon-replay-5</code></li> + <li><span class="vjs-icon-replay-10"></span> <code>.vjs-icon-replay-10</code></li> + <li><span class="vjs-icon-replay-30"></span> <code>.vjs-icon-replay-30</code></li> + <li><span class="vjs-icon-forward-5"></span> <code>.vjs-icon-forward-5</code></li> + <li><span class="vjs-icon-forward-10"></span> <code>.vjs-icon-forward-10</code></li> + <li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li> + <li><span class="vjs-icon-audio"></span> <code>.vjs-icon-audio</code></li> + <li><span class="vjs-icon-next-item"></span> <code>.vjs-next-item</code></li> + <li><span class="vjs-icon-previous-item"></span> <code>.vjs-icon-previous-item</code></li> + <li><span class="vjs-icon-shuffle"></span> <code>.vjs-icon-shuffle</code></li> + <li><span class="vjs-icon-cast"></span> <code>.vjs-icon-cast</code></li> + <li><span class="vjs-icon-picture-in-picture-enter"></span> <code>.vjs-icon-picture-in-picture-enter</code></li> + <li><span class="vjs-icon-picture-in-picture-exit"></span> <code>.vjs-icon-picture-in-picture-exit</code></li> + <li><span class="vjs-icon-facebook"></span> <code>.vjs-icon-facebook</code></li> + <li><span class="vjs-icon-linkedin"></span> <code>.vjs-icon-linkedin</code></li> + <li><span class="vjs-icon-twitter"></span> <code>.vjs-icon-twitter</code></li> + <li><span class="vjs-icon-tumblr"></span> <code>.vjs-icon-tumblr</code></li> + <li><span class="vjs-icon-pinterest"></span> <code>.vjs-icon-pinterest</code></li> + <li><span class="vjs-icon-audio-description"></span> <code>.vjs-icon-audio-description</code></li> + </ul> +</body> +</html> diff --git a/javascript/videojs/sandbox/index.html.example b/javascript/videojs/sandbox/index.html.example new file mode 100644 index 0000000..80ebf99 --- /dev/null +++ b/javascript/videojs/sandbox/index.html.example @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid); + player.log('window.player created', player); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/language.html.example b/javascript/videojs/sandbox/language.html.example new file mode 100644 index 0000000..74ef640 --- /dev/null +++ b/javascript/videojs/sandbox/language.html.example @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Set Page Language Here --> +<html lang="es"> +<head> + <meta charset="utf-8" /> + <title>VideoJS Languages Demo</title> + + <!-- Load the source files --> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + + <!-- Add support for Spanish 'es' --> + <script src="../dist/lang/es.js"></script> + +</head> +<body> + <video id="vid1" class="video-js" controls preload="auto" width="640" height="264" data-setup=''> + <!-- + <source src="https://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'> + <source src="https://video-js.zencoder.com/oceans-clip.webm" type='video/webm'> + <source src="https://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'> + --> + </video> + + <script> + var player = videojs("vid1"); + player.controlBar.show(); + player.error(1); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/live.html.example b/javascript/videojs/sandbox/live.html.example new file mode 100644 index 0000000..41a2f55 --- /dev/null +++ b/javascript/videojs/sandbox/live.html.example @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the live.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/live.html</pre> + </div> + + <video-js id="vid1" controls preload="auto" width="640" height="264"> + <source src="https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8" type="application/x-mpegURL"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + // fake a livestream for easy testing + var vid = document.getElementById('vid1'); + + var player = videojs(vid); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/liveui.html.example b/javascript/videojs/sandbox/liveui.html.example new file mode 100644 index 0000000..3fdd60a --- /dev/null +++ b/javascript/videojs/sandbox/liveui.html.example @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the liveui.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/liveui.html</pre> + </div> + + <video-js id="vid1" controls preload="auto" width="640" height="264"> + <source src="https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8" type="application/x-mpegURL"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + // fake a livestream for easy testing + var vid = document.getElementById('vid1'); + var liveui = true + + if (videojs.browser.IS_ANDROID) { + liveui = false; + } + var player = videojs(vid, {liveui: liveui}); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/load-media.html.example b/javascript/videojs/sandbox/load-media.html.example new file mode 100644 index 0000000..f6fc119 --- /dev/null +++ b/javascript/videojs/sandbox/load-media.html.example @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js loadMedia Demo</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <h1>Video.js <code>loadMedia</code> Demo</h1> + <p>This shows how the <code>loadMedia</code> method is used and the effect it has on the player.</p> + + <video-js + id="vid1" + controls + width="640" + height="264"> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid); + + player.log('window.player created', player); + + player.loadMedia({ + artist: 'Disney', + album: 'Oceans', + title: 'Oceans', + description: 'Journey in to the depths of a wonderland filled with mystery, beauty and power. Oceans is a spectacular story, narrated by Pierce Brosnan, about remarkable creatures under the sea. It\'s an unprecedented look at the lives of these elusive deepwater creatures through their own eyes. Incredible state-of-the-art-underwater filmmaking will take your breath away as you migrate with whales, swim alongside a great white shark and race with dolphins at play.', + poster: 'https://vjs.zencdn.net/v/oceans.png', + src: [{ + src: 'https://vjs.zencdn.net/v/oceans.mp4', + type: 'video/mp4' + }, { + src: 'https://vjs.zencdn.net/v/oceans.webm', + type: 'video/webm' + }, { + src: 'https://vjs.zencdn.net/v/oceans.ogv', + type: 'video/ogv' + }], + textTracks: [{ + kind: 'captions', + label: 'English', + src: '../docs/examples/shared/example-captions.vtt', + srclang: 'en' + }] + }) + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/middleware-instances.html.example b/javascript/videojs/sandbox/middleware-instances.html.example new file mode 100644 index 0000000..b33e6b6 --- /dev/null +++ b/javascript/videojs/sandbox/middleware-instances.html.example @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + <link rel="icon" href="data:;base64,="> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: 1em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p> + In developer console, Sources tab, look for <code>clearCacheForPlayer</code> function. + Place a logpoint at function closing. Logpoint content should be: + </p> + <pre style="font-size: 1.2em;">'middlewareInstances nr', Object.keys(middlewareInstances).length</pre> + <p> + When one or more players are removed, the number of instances should *NOT* grow. + </p> + </div> + + <div> + <button id="add-player" style="min-height: 36px;">Add player</button> + <button id="remove-all" style="min-height: 36px;">Remove all players</button> + </div> + + <div id="player-container"></div> + + <script> + let playerList = []; + + document.querySelector('#add-player').addEventListener('click', addPlayer); + document.querySelector('#remove-all').addEventListener('click', removeAll); + + function addPlayer() { + const videoJsElem = document.createElement('video-js'); + videoJsElem.setAttribute('controls', ''); + videoJsElem.setAttribute('preload', 'auto'); + videoJsElem.setAttribute('width', '640'); + videoJsElem.setAttribute('height', '264'); + videoJsElem.setAttribute('poster', 'https://vjs.zencdn.net/v/oceans.png'); + + document.querySelector('#player-container').appendChild(videoJsElem); + + const player = videojs(videoJsElem); + player.src({ + src: 'https://vjs.zencdn.net/v/oceans.mp4', + type: 'video/mp4', + }); + + playerList.push(player); + + player.log('Video.js player created', player.id()); + } + + function removeAll() { + for (const player of playerList) { + player.dispose(); + } + playerList.length = 0; + } + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/middleware-play.html.example b/javascript/videojs/sandbox/middleware-play.html.example new file mode 100644 index 0000000..ebe0748 --- /dev/null +++ b/javascript/videojs/sandbox/middleware-play.html.example @@ -0,0 +1,152 @@ +<!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> diff --git a/javascript/videojs/sandbox/noUITitleAttributes.html.example b/javascript/videojs/sandbox/noUITitleAttributes.html.example new file mode 100644 index 0000000..ef6a6fe --- /dev/null +++ b/javascript/videojs/sandbox/noUITitleAttributes.html.example @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js without title attribute on UI controls example</title> + + <!-- Load the source files --> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p> + <pre><b>npm start</b> will automatically copy these files over from .example if they don't already exist.</pre> + <pre>open http://localhost:9999/sandbox/noUITitleAttributes.html</pre> + </div> + + <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" + poster="https://vjs.zencdn.net/v/oceans.png" + data-setup='{"controlBar": {"volumePanel": {"inline": false}}, "noUITitleAttributes" : true}'> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video> + <p>This demo shows the effect of setting the <strong>noUITitleAttributes</strong> option for video.js. It also includes the <strong>:focus-visible</strong> polyfill (see focus-visible.html)</p> + <script> + var vid = document.getElementById("vid1"); + var player = videojs(vid); + + </script> + <script src="https://unpkg.com/focus-visible"></script> +</body> +</html> diff --git a/javascript/videojs/sandbox/pip-disabled.html.example b/javascript/videojs/sandbox/pip-disabled.html.example new file mode 100644 index 0000000..ffab2e5 --- /dev/null +++ b/javascript/videojs/sandbox/pip-disabled.html.example @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <video-js + id="vid1" + controls + disablepictureinpicture + preload="none" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + <p> + PiP disabled via <b>disablepictureinpicture</b> attribute. + </p> + <video-js + id="vid2" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + <p> + PiP disabled via <b>disablePictureInPicture</b> player option. + </p> + <button id="PiPToggleBtn">call disablePictureInPicture(false) for the player 2</button> + <script> + var pipDisabled = true; + var vid = document.getElementById('vid1'); + var player = videojs(vid); + + var vid2 = document.getElementById('vid2'); + var player2 = videojs(vid2, { + controlBar: { + pictureInPictureToggle: true + }, + disablePictureInPicture: true + }); + + var pipToggle = document.getElementById('PiPToggleBtn'); + pipToggle.addEventListener('click', function() { + pipToggle.innerText = 'call disablePictureInPicture(' + pipDisabled + ') for the player 2'; + pipDisabled = !pipDisabled; + player2.disablePictureInPicture(pipDisabled); + }); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/plugin.html.example b/javascript/videojs/sandbox/plugin.html.example new file mode 100644 index 0000000..2f4c154 --- /dev/null +++ b/javascript/videojs/sandbox/plugin.html.example @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Plugin Example</title> + + <!-- Load the source files --> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + +</head> +<body> + <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p> + + <video id="vid1" class="video-js" controls preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <p>Video Playback Not Supported</p> + </video> + + <script> + (function() { + var vid1, progressed; + + // create a really simple plugin + // this one just logs the buffered percentage to the console whenever + // more data is downloaded + progressed = function(options) { + this.on('progress', function(e) { + console.log(this.bufferedPercent()); + }); + }; + + // register the plugin + videojs.plugin('progressed', progressed); + + // initialize it + vid1 = videojs('vid1'); + vid1.progressed(); + })(); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/quality-levels.html.example b/javascript/videojs/sandbox/quality-levels.html.example new file mode 100644 index 0000000..7716428 --- /dev/null +++ b/javascript/videojs/sandbox/quality-levels.html.example @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <style> + .btn { + background-color: #5cb85c; + border-radius: 0.5em; + border: 1px solid #18ab29; + display: inline-block; + cursor: pointer; + color: #ffffff; + font-size: 1em; + padding: 0.5em; + margin: 0.25em 0.25em 0.25em 0; + } + + .btn-success { + font-weight: bold; + background-color: #337ab7; + } + </style> + <script src="../dist/video.js"></script> +</head> +<body> + <div + style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, + except files that end in .example (so don't edit or add those files). To get started make a copy of + index.html.example and rename it to index.html.</p> + <pre>cp sandbox/index.html.example sandbox/index.html</pre> + <pre>npm run start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + <div style="width: 65%;"> + <video-js id="vid1" controls preload="auto" class="vjs-fluid"> + <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" + type="application/x-mpegURL"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a + href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + </div> + <div id="currentLevelControl" style="width: 100%;"> + <button id="autoBtn" type="button" class="btn btn-success">Auto</button> + </div> + <script> + const vid = document.getElementById('vid1'); + const player = videojs(vid, { + qualityLevels: true + }); + player.one('loadedmetadata', () => { + const container = document.getElementById('currentLevelControl'); + const autoBtn = document.getElementById('autoBtn'); + const btnList = []; + // create a button for every video quality level + for (let i = 0; i < player.qualityLevels().length; i++) { + let level = player.qualityLevels()[i]; + if (level.width === undefined) { + continue; + } + let levelElm = document.createElement('button'); + levelElm.classList.add('btn'); + if (player.qualityLevels().selectedIndex === i) { + levelElm.classList.add('btn-success'); + } + levelElm.setAttribute('title', level.label); + levelElm.setAttribute('type', 'button'); + levelElm.setAttribute('data-level', i); + levelElm.innerText = `${i} ('${level.width}': ${level.height}p, ${(level.bitrate / 1024).toFixed(0)}kb)`; + btnList.push(levelElm); + container.append(levelElm); + } + // attach a click handler to buttons + for (const btn of btnList) { + btn.addEventListener('click', (event) => { + const selectedIndex = player.qualityLevels().selectedIndex; + const btnIndex = event.target.dataset.level; + autoBtn.classList.remove('btn-success'); + if (selectedIndex == btnIndex) { + return; + } + btnList.forEach((elm) => { + player.qualityLevels()[elm.dataset.level].enabled = elm.dataset.level === btnIndex; + }); + }); + } + // update buttons on video quality changes + player.qualityLevels().on('change', (event) => { + for (let btn of btnList) { + if (btn.dataset.level == event.selectedIndex) { + btn.classList.add('btn-success'); + } else { + btn.classList.remove('btn-success'); + } + } + }); + // add a click handler to reset previously selected video quality by the user + autoBtn.addEventListener('click', (event) => { + btnList.forEach((elm) => { + player.qualityLevels()[elm.dataset.level].enabled = true; + }); + autoBtn.classList.toggle('btn-success', true); + }); + }); + </script> +</body> +</html> diff --git a/javascript/videojs/sandbox/responsive.html.example b/javascript/videojs/sandbox/responsive.html.example new file mode 100644 index 0000000..b108c74 --- /dev/null +++ b/javascript/videojs/sandbox/responsive.html.example @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <title>Video.js Sandbox - Responsive</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + <style type="text/css"> + body { + margin: 0; + padding: 0; + } + + .breakpoints, .video-js, table { + margin: 1em 0; + } + + table { + border-collapse: collapse; + } + + th, td { + border: 1px solid #ccc; + padding: 0.5em 1em; + } + + tbody tr { + color: #999; + } + + tbody tr:first-child { + color: #000; + } + + .breakpoints div { + background-color: red; + color: white; + padding: 0.5em 1em; + } + + @media (max-width: 210px) { + .breakpoints .tiny { + background-color: green; + } + } + + @media (min-width: 211px) and (max-width: 320px) { + .breakpoints .x-small { + background-color: green; + } + } + + @media (min-width: 321px) and (max-width: 425px) { + .breakpoints .small { + background-color: green; + } + } + + @media (min-width: 426px) and (max-width: 768px) { + .breakpoints .medium { + background-color: green; + } + } + + @media (min-width: 769px) and (max-width: 1440px) { + .breakpoints .large { + background-color: green; + } + } + + @media (min-width: 1441px) and (max-width: 2560px) { + .breakpoints .x-large { + background-color: green; + } + } + + @media (min-width: 2561px) { + .breakpoints .huge { + background-color: green; + } + } + </style> +</head> +<body> + <p> + The following boxes indicate which breakpoint should be applied to the + player when it fills the width of its containing viewport. + </p> + <p> + Use these to validate that the default breakpoints match up with how + CSS media queries work. + </p> + <p> + <b>Because these bars are updated by CSS, they will change before the <code>playerresize</code> event occurs!</b> + </p> + <div class="breakpoints"> + <div class="tiny">vjs-layout-tiny (0px-210px)</div> + <div class="x-small">vjs-layout-x-small (211px-320px)</div> + <div class="small">vjs-layout-small (321px-425px)</div> + <div class="medium">vjs-layout-medium (426px-768px)</div> + <div class="large">vjs-layout-large (769px-1440px)</div> + <div class="x-large">vjs-layout-x-large (1441px-2560px)</div> + <div class="huge">vjs-layout-huge (2561px+)</div> + </div> + + <video-js + class="vjs-fluid" + controls + preload="auto" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <p> + Each time the player size changes, a row is prepended to this table. + </p> + <table> + <thead> + <tr> + <th>Class</th> + <th>Player Width</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + + <script> + var vid = document.querySelector('video-js'); + var player = videojs(vid, {responsive: true}); + var tbody = document.querySelector('table tbody'); + + player.on('playerresize', function() { + var values = { + breakpoint: player.currentBreakpoint(), + className: player.el().className.match(/vjs-layout-([a-z\-]+)/)[0], + playerWidth: player.currentWidth() + }; + + videojs.log('playerresize', values); + + var tr = document.createElement('tr'); + + tr.innerHTML = '<td>' + + values.className + + '</td><td>' + + values.playerWidth + + '</td>'; + + tbody.insertBefore(tr, tbody.firstChild); + }); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/shadow-dom.html.example b/javascript/videojs/sandbox/shadow-dom.html.example new file mode 100644 index 0000000..90ea348 --- /dev/null +++ b/javascript/videojs/sandbox/shadow-dom.html.example @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> + <link rel="icon" href="data:;base64,="> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <p>Tap on video to play/pause</p> + + <test-custom-element id="customElement1"></test-custom-element> + + <script> + // Custom Element definition + class TestCustomElement extends HTMLElement { + + constructor() { + super(); + + const shadowRoot = this.attachShadow({ mode: 'closed' }); + + const styleLinkElem = document.createElement('link'); + + styleLinkElem.setAttribute('rel', 'stylesheet'); + styleLinkElem.setAttribute('href', '../dist/video-js.css') + shadowRoot.append(styleLinkElem); + + const containerElem = document.createElement('div'); + + containerElem.setAttribute('data-vjs-player', ''); + shadowRoot.appendChild(containerElem); + + const videoElem = document.createElement('video'); + + videoElem.setAttribute('preload', 'auto'); + videoElem.setAttribute('width', 640); + videoElem.setAttribute('height', 260); + containerElem.appendChild(videoElem); + + const sourceElem = document.createElement('source'); + + sourceElem.setAttribute('src', 'https://vjs.zencdn.net/v/oceans.mp4'); + sourceElem.setAttribute('type', 'video/mp4'); + videoElem.appendChild(sourceElem); + + this.innerPlayer = videojs(videoElem); + + containerElem.addEventListener('click', () => { + if (this.innerPlayer.paused()) { + this.innerPlayer.play(); + } + else { + this.innerPlayer.pause(); + } + }); + } + } + + window.customElements.define('test-custom-element', TestCustomElement); + + // Main entry point + + document.addEventListener('DOMContentLoaded', () => { + var customElem = document.getElementById('customElement1'); + var innerPlayer = customElem.innerPlayer; + innerPlayer.log('Shadow DOM inner player created', innerPlayer); + }); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/skip-buttons.html.example b/javascript/videojs/sandbox/skip-buttons.html.example new file mode 100644 index 0000000..b921058 --- /dev/null +++ b/javascript/videojs/sandbox/skip-buttons.html.example @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css" /> + <script src="../dist/video.js"></script> + </head> + <body> + <div> + <h2>Forward: 5, Backward: 10</h2> + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png" + > + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> + <track + kind="captions" + src="../docs/examples/shared/example-captions.vtt" + srclang="en" + label="English" + /> + <p class="vjs-no-js"> + To view this video please enable JavaScript, and consider upgrading to + a web browser that + <a href="https://videojs.com/html5-video-support/" target="_blank" + >supports HTML5 video</a + > + </p> + </video-js> + </div> + + <div> + <h2>Forward: 10, Backward: 30</h2> + <video-js + id="vid2" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png" + > + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> + <track + kind="captions" + src="../docs/examples/shared/example-captions.vtt" + srclang="en" + label="English" + /> + <p class="vjs-no-js"> + To view this video please enable JavaScript, and consider upgrading to + a web browser that + <a href="https://videojs.com/html5-video-support/" target="_blank" + >supports HTML5 video</a + > + </p> + </video-js> + </div> + + <div> + <h2>Forward: 10</h2> + <video-js + id="vid3" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png" + > + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> + <track + kind="captions" + src="../docs/examples/shared/example-captions.vtt" + srclang="en" + label="English" + /> + <p class="vjs-no-js"> + To view this video please enable JavaScript, and consider upgrading to + a web browser that + <a href="https://videojs.com/html5-video-support/" target="_blank" + >supports HTML5 video</a + > + </p> + </video-js> + </div> + + <script> + var vid1 = document.getElementById("vid1"); + var options = { + muted: true, + controlBar: { skipButtons: { forward: 5, backward: 10 } }, + }; + videojs(vid1, options); + + var vid2 = document.getElementById("vid2"); + options.controlBar.skipButtons = { forward: 10, backward: 30 }; + videojs(vid2, options); + + var vid3 = document.getElementById("vid3"); + options.controlBar.skipButtons = {forward: 10} + videojs(vid3, options); + </script> + </body> +</html> diff --git a/javascript/videojs/sandbox/svg-icons-enabled.html.example b/javascript/videojs/sandbox/svg-icons-enabled.html.example new file mode 100644 index 0000000..49dbb6b --- /dev/null +++ b/javascript/videojs/sandbox/svg-icons-enabled.html.example @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the svg-icons-enabled.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/svg-icons-enabled.html</pre> + </div> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid, {experimentalSvgIcons: true}); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/svg-icons.html.example b/javascript/videojs/sandbox/svg-icons.html.example new file mode 100644 index 0000000..e0dda3c --- /dev/null +++ b/javascript/videojs/sandbox/svg-icons.html.example @@ -0,0 +1,414 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>VideoJS</title> + <link href="../../dist/video-js.css" rel="stylesheet" type="text/css"> + <style> + body { + text-align: center; + } + + .container-class { + display: flex; + flex-wrap: wrap; + } + + /* Overwrite default height and width */ + .vjs-svg-icon { + width: 24px; + height: 24px; + } + + div:not(.container-class) { + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid #ccc; + width: 150px; + margin: 10px; + padding: 10px; + background-color: #5A5A5A; + } + + div span:nth-of-type(2) { + color: white; + } + </style> +</head> +<body> + <h1>VideoJS SVG Icons</h1> + <p>In order to use SVG icons, the <code>experimentalSvgIcons</code> option must be enabled on the player. See: <a href="https://videojs.com/guides/options/#experimentalsvgicons">experimentalSvgIcons</a></p> + <p>SVG Icons are expected to be added to the player through components. Example: <code>myButton.setIcon('play');</code></p> + <div class="container-class vjs-svg-icons-enabled"> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-play" /> + </svg> + </span> + <span>play</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-play-circle" /> + </svg> + </span> + <span>play-circle</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-pause" /> + </svg> + </span> + <span>pause</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-mute" /> + </svg> + </span> + <span>volume-mute</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-low" /> + </svg> + </span> + <span>volume-low</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-medium" /> + </svg> + </span> + <span>volume-medium</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-high" /> + </svg> + </span> + <span>volume-high</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-fullscreen-enter" /> + </svg> + </span> + <span>fullscreen-enter</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-fullscreen-exit" /> + </svg> + </span> + <span>fullscreen-exit</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-spinner" /> + </svg> + </span> + <span>spinner</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-subtitles" /> + </svg> + </span> + <span>subtitles</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-captions" /> + </svg> + </span> + <span>captions</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-hd" /> + </svg> + </span> + <span>hd</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-chapters" /> + </svg> + </span> + <span>chapters</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-downloading" /> + </svg> + </span> + <span>downloading</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download" /> + </svg> + </span> + <span>file-download</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download-done" /> + </svg> + </span> + <span>file-download-done</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download-off" /> + </svg> + </span> + <span>file-download-off</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-share" /> + </svg> + </span> + <span>share</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cog" /> + </svg> + </span> + <span>cog</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-square" /> + </svg> + </span> + <span>square</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle" /> + </svg> + </span> + <span>circle</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle-outline" /> + </svg> + </span> + <span>circle-outline</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle-inner-circle" /> + </svg> + </span> + <span>circle-inner-circle</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cancel" /> + </svg> + </span> + <span>cancel</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-repeat" /> + </svg> + </span> + <span>repeat</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay" /> + </svg> + </span> + <span>replay</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-5" /> + </svg> + </span> + <span>replay-5</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-10" /> + </svg> + </span> + <span>replay-10</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-30" /> + </svg> + </span> + <span>replay-30</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-5" /> + </svg> + </span> + <span>forward-5</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-10" /> + </svg> + </span> + <span>forward-10</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-30" /> + </svg> + </span> + <span>forward-30</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-audio" /> + </svg> + </span> + <span>audio</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-next-item" /> + </svg> + </span> + <span>next-item</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-previous-item" /> + </svg> + </span> + <span>previous-item</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-shuffle" /> + </svg> + </span> + <span>shuffle</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cast" /> + </svg> + </span> + <span>cast</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-picture-in-picture-enter" /> + </svg> + </span> + <span>picture-in-picture-enter</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-picture-in-picture-exit" /> + </svg> + </span> + <span>picture-in-picture-exit</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-facebook" /> + </svg> + </span> + <span>facebook</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-linkedin" /> + </svg> + </span> + <span>linkedin</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-twitter" /> + </svg> + </span> + <span>twitter</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-tumblr" /> + </svg> + </span> + <span>tumblr</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-pinterest" /> + </svg> + </span> + <span>pinterest</span> + </div> + <div> + <span class="vjs-icon-placeholder vjs-svg-icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-audio-description" /> + </svg> + </span> + <span>audio-description</span> + </div> + </div> +</body> +</html> diff --git a/javascript/videojs/sandbox/transient-button.html.example b/javascript/videojs/sandbox/transient-button.html.example new file mode 100644 index 0000000..2006abb --- /dev/null +++ b/javascript/videojs/sandbox/transient-button.html.example @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css" /> + <script src="../dist/video.js"></script> + <style> + article { + max-width: 800px; + margin: 0 auto; + } + .vjs-transient-button.unmute-button span::before { + content: "\f104"; + font-family: "VideoJS"; + vertical-align: middle; + padding-right: 0.3em; + } + </style> + </head> + <body> + <article> + <h1>Transient button demo</h1> + <video-js + id="vid1" + class="vjs-fluid" + controls + muted + preload="auto" + poster="https://vjs.zencdn.net/v/oceans.png" + > + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> + <track + kind="captions" + src="../docs/examples/shared/example-captions.vtt" + srclang="en" + label="English" + /> + </video-js> + </article> + <p>An unmute transient button will show after playback starts if muted.</p> + <p> + Transient buttons to skip into / credits / recap display at times defined + in a metadata track. + </p> + <script> + const player = videojs("#vid1"); + + player.ready(function () { + // Adds an unmute button that umutes and goes away when clicked + player.one("playing", function () { + if (this.muted()) { + const unmuteButton = player.addChild( + "TransientButton", + { + controlText: "Unmute", + position: ["top", "left"], + className: "unmute-button", + clickHandler: function () { + this.player().muted(false); + this.dispose(); + }, + }, + player.children().indexOf(player.getChild("ControlBar")) + ); + unmuteButton.show(); + } + }); + + // A track that defines skippable parts + const track = player.addRemoteTextTrack({ + src: + "data:text/vtt;base64," + + btoa(`WEBVTT + + 00:01.000 --> 00:10.000 + Recap + + 00:15.000 --> 00:20.000 + Intro + + 00:40.000 --> 00:47.000 + Credits + + `), + kind: "metadata", + label: "skip_sections", + }).track; + + let skipButtons = []; + + track.addEventListener("cuechange", function () { + const cue = track.activeCues[0]; + if (cue) { + const skipButton = player.addChild( + "TransientButton", + { + controlText: `Skip ${cue.text}`, + position: ["bottom", "right"], + clickHandler: () => { + player.currentTime(cue.endTime); + }, + takeFocus: true, + }, + player.children().indexOf(player.getChild("ControlBar")) + ); + skipButtons.push(skipButton); + skipButton.show(); + } else { + while (skipButtons.length > 0) { + skipButtons.shift().dispose(); + } + } + }); + track.mode = "hidden"; + }); + </script> + </body> +</html> diff --git a/javascript/videojs/sandbox/userAction-click.html.example b/javascript/videojs/sandbox/userAction-click.html.example new file mode 100644 index 0000000..dcb16cd --- /dev/null +++ b/javascript/videojs/sandbox/userAction-click.html.example @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/index.html</pre> + </div> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + function myClickHandler(event) { + console.log("Yowser! Single Click Action!"); + if (this.isFullscreen()) { + this.exitFullscreen(); + } else { + this.requestFullscreen(); + } + }; + var player = videojs(vid, { + userActions: { + click: myClickHandler + } + }); + </script> + +</body> +</html> diff --git a/javascript/videojs/sandbox/vertical-volume.html.example b/javascript/videojs/sandbox/vertical-volume.html.example new file mode 100644 index 0000000..56ada4a --- /dev/null +++ b/javascript/videojs/sandbox/vertical-volume.html.example @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Video.js Sandbox</title> + <link href="../dist/video-js.css" rel="stylesheet" type="text/css"> + <script src="../dist/video.js"></script> +</head> +<body> + <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;"> + <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the vertical-volume.html</p> + <pre>npm start</pre> + <pre>open http://localhost:9999/sandbox/vertical-volume.html</pre> + </div> + + <video-js + id="vid1" + controls + preload="auto" + width="640" + height="264" + poster="https://vjs.zencdn.net/v/oceans.png"> + <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> + <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> + <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> + <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> + </video-js> + + <script> + var vid = document.getElementById('vid1'); + var player = videojs(vid, {controlBar: {volumePanel: {inline: false}}}); + </script> + +</body> +</html> |