Skip to content

Commit

Permalink
Update sandbox to 8.19.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@edwinbradford
edwinbradford committed Oct 10, 2024
1 parent fad5c2c commit 13dabd0
Show file tree
Hide file tree
Showing 24 changed files with 1,366 additions and 724 deletions.
68 changes: 14 additions & 54 deletions sandbox/combined-tracks.html.example
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AV Neue theme tracks example</title>
<title>Video.js Sandbox</title>

<style>
html {
width: 100%;
height: 100%;
font-family: consolas;
font-size: 100%;
background-color:#e5e5e5;
}
body {
margin: 0;
height: 100%;
}
video {
margin: 0;
}
</style>

<!-- AV Neue theme -->
<!-- Load the source files -->
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">

<!-- Video.js -->
<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="videojsElement" class="video-js" lang="en" controls poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
<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">
Expand All @@ -41,36 +26,12 @@
<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 player = videojs('videojsElement', {
'autoplay': false,
'controls': true,
'loop': false,
'muted': false,
'preload': 'auto',
'responsive': true,
'fluid': true, // (1) or...
// 'fill': true // (2) or...
// 'aspectRatio': '16:9' // (3)
'breakpoints': {
'tiny': 210,
'x-small': 320,
'small': 639,
'medium': 768,
'large': 1440,
'x-large': 2560,
'huge': Infinity
},
'html5': {
'nativeTextTracks': false,
'nativeControlsForTouch': false,
'nativeAudioTracks': false,
'nativeVideoTracks': false,
},
'inactivityTimeout': 1000,
'controlBar': {
'children': [
var vid = document.getElementById("vid1");
var player = videojs(vid, {
controlBar: {
children: [
'playToggle',
'volumePanel',
'currentTimeDisplay',
Expand All @@ -87,7 +48,6 @@
'captionsButton',
'subsCapsButton',
'audioTrackButton',
'pictureInPictureToggle',
'fullscreenToggle'
]
}
Expand Down
93 changes: 85 additions & 8 deletions sandbox/debug.html.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,106 @@
<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 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;">
<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="vid1"
id="debug"
controls
preload="auto"
width="640"
height="264">
<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>
width="960"
height="396">
</video-js>

<script>
var vid = document.getElementById('vid1');
var player = videojs(vid);
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>
Expand Down
75 changes: 10 additions & 65 deletions sandbox/descriptions.html.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,23 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AV Neue Theme text descriptions, chapters and captions example</title>
<title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>

<style>
html {
width: 100%;
height: 100%;
font-family: consolas;
font-size: 100%;
background-color:#e5e5e5;
}
body {
margin: 0;
height: 100%;
}
video {
margin: 0;
}
</style>

<!-- AV Neue theme -->
<!-- Load the source files -->
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">

<!-- Video.js -->
<script src="../dist/video.js"></script>

</head>
<body>

<video id="videojsElement" class="video-js" controls preload="none" width="640" height="360" poster="http://d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
<!-- 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">
Expand All @@ -49,47 +36,5 @@
<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 player = videojs('videojsElement', {
'autoplay': false,
'controls': true,
'loop': false,
'muted': false,
'preload': 'auto',
'responsive': true,
'fluid': true, // (1) or...
// 'fill': true // (2) or...
// 'aspectRatio': '16:9' // (3)
'breakpoints': {
'tiny': 210,
'x-small': 320,
'small': 639,
'medium': 768,
'large': 1440,
'x-large': 2560,
'huge': Infinity
},
'html5': {
'nativeTextTracks': false,
'nativeControlsForTouch': false,
'nativeAudioTracks': false,
'nativeVideoTracks': false,
},
'inactivityTimeout': 1000,
'controlBar': {
'pictureInPictureToggle': true,
'durationDisplay': true,
'remainingTimeDisplay': false,
'timeDivider': false,
},
},
function() {
// this.createModal('foo');
// Callback.
});
</script>

<!--<script>player.createModal('foo');</script>-->

</body>
</html>
52 changes: 52 additions & 0 deletions sandbox/docpip.html.example
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 13dabd0

Please sign in to comment.