mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-04 10:19:24 +02:00
51 lines
1.5 KiB
HTML
51 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>videojs-overlay Demo</title>
|
|
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
|
|
<link href="dist/videojs-overlay.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<video id="videojs-overlay-player" class="video-js vjs-default-skin" controls>
|
|
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
|
|
<source src="//vjs.zencdn.net/v/oceans.webm" type='video/webm'>
|
|
</video>
|
|
<ul>
|
|
<li><a href="test/debug.html">Run unit tests in browser.</a></li>
|
|
</ul>
|
|
<script src="node_modules/video.js/dist/video.js"></script>
|
|
<script src="dist/videojs-overlay.js"></script>
|
|
<script>
|
|
(function(window, videojs) {
|
|
const player = window.player = videojs('videojs-overlay-player');
|
|
const overlay = player.overlay({
|
|
content: 'Default overlay content',
|
|
debug: true,
|
|
overlays: [{
|
|
content: 'The video is playing!',
|
|
start: 'play',
|
|
end: 'pause',
|
|
align: 'bottom-right'
|
|
}, {
|
|
start: 0,
|
|
end: 15,
|
|
align: 'bottom-left'
|
|
}, {
|
|
start: 15,
|
|
end: 30,
|
|
align: 'bottom'
|
|
}, {
|
|
start: 30,
|
|
end: 45,
|
|
align: 'bottom-right'
|
|
}, {
|
|
start: 20,
|
|
end: 'pause'
|
|
}]
|
|
});
|
|
overlay.add({content: "this is a new one", start: "play", end: "pause"});
|
|
}(window, window.videojs));
|
|
</script>
|
|
</body>
|
|
</html>
|