Skip to content

Commit

Permalink
Update src css components to 18.9.0
Browse files Browse the repository at this point in the history 
Update multiple css component and sandbox examples.

1. Merge 18.9.0 from upstream.
2. Merge css for spatial navigation.
3. Merge css for experimental svgs.
4. Merge css for audio only mode.
5. Replace absolute layout of controlbar children with flexbox.
6. Add controlbar flexwrap component javascript and css.
7. Add time and pad time javascript and css.
8. Update big play and play pause positioning.
  • Loading branch information
@edwinbradford
edwinbradford committed Nov 8, 2024
1 parent b005584 commit 113078d
Show file tree
Hide file tree
Showing 25 changed files with 1,178 additions and 878 deletions.
198 changes: 168 additions & 30 deletions sandbox/combined-tracks.html.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,143 @@
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Video.js Sandbox</title>

<!-- Load the source files -->
<!-- Viewport style -->
<style>
html {
width: 100%;
height: 100%;
font-family: consolas;
font-size: 100%;
background-color: #1a1a1a;
}
body {
margin: 0;
height: 100%;
}
video {
margin: 0;
}
</style>

<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">
<video-js
id="videojsElement"
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>
</video-js>
<script>
var vid = document.getElementById("vid1");
var player = videojs(vid, {

/* Add a custom component to wrap control bar child flex items,
* cf. player control bar children below
*/
const Component = videojs.getComponent('Component');
class neueWrap extends Component {
constructor(player, options) {
super(player, options);
this.addClass('vjs-neue-wrap'); // Add any classes you want
}
}
videojs.registerComponent('neueWrap', neueWrap);

/* Pad time with leading zeros,
* cf. player ready function below
*/
function formatTimeWithLeadingZeros(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}

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)
// audioOnlyMode: true,
spatialNavigation: {
enabled: true,
horizontalSeek: true
},
// Breakpoints require responsive: true
breakpoints: {
tiny: 300,
xsmall: 400,
small: 500,
medium: 600,
large: 700,
xlarge: 800,
huge: 900
},
html5: {
nativeTextTracks: false,
nativeControlsForTouch: false,
nativeAudioTracks: false,
nativeVideoTracks: false,
},
inactivityTimeout: 1000,
controlBar: {
// children in flex order
children: [
'playToggle',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'liveDisplay',
'remainingTimeDisplay',
{
name: 'volumePanel',
inline: true // Horizontal
},
'customControlSpacer',
'playbackRateMenuButton',
'chaptersButton',
Expand All @@ -48,12 +147,51 @@
'captionsButton',
'subsCapsButton',
'audioTrackButton',
'fullscreenToggle'
]
}
'pictureInPictureToggle',
'fullscreenToggle',
'neueWrap', // Custom flexwrap component
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'liveDisplay',
'seekToLive',
{
name: 'remainingTimeDisplay',
displayNegative: false
},
],
},
});
/* Show big play button when paused and time controls,
* cf. https://github.com/videojs/video.js/pull/8833
*/
player.addClass(
'vjs-normalise-time-controls',
'vjs-show-big-play-button-on-pause'
);
player.ready(function() {
// Start spatial navigation e.g. pointer devices
player.spatialNavigation.start();

// Pad time with leading zeros
const currentTimeDisplay = player.controlBar.currentTimeDisplay;
const remainingTimeDisplay = player.controlBar.remainingTimeDisplay;

currentTimeDisplay.el().innerText = formatTimeWithLeadingZeros(0);
remainingTimeDisplay.el().innerText = formatTimeWithLeadingZeros(player.duration());

currentTimeDisplay.updateContent = function() {
const currentTime = player.currentTime();
this.el().innerText = formatTimeWithLeadingZeros(currentTime);
};

remainingTimeDisplay.updateContent = function() {
const remainingTime = player.remainingTime();
this.el().innerText = formatTimeWithLeadingZeros(Math.abs(remainingTime));
};
});
console.log(player.language());
</script>

</body>
</html>
Loading

0 comments on commit 113078d

Please sign in to comment.