I am using the Plyr.io video player which is an open source video player this is its link: The link for plyr.io, and I am using the HTML 5 video player.
However, I have implemented it using the following code -->
document.addEventListener('DOMContentLoaded', () => {
// Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control
// to the settings, ALL default controls are removed and you have to add them back in by defining those below.
// For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default.
// Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed,
// meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again.
const controls = [
'play-large', // The large play button in the center
'restart', // Restart playback
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'fullscreen', // Toggle fullscreen
];
const player = Plyr.setup('.js-player', { controls });
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
<script src="main2.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="js-player" id="vid-cont">
<video
controls
crossorigin
playsinline
class="js-player">
<!-- Video files -->
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
type="video/mp4"
size="1080"
/>
</video>
</div>
</body>
</html>I need a way of showing the text as an overlay over the video.
I have observed that if you append the overlay under the .plyr div, you will be transformed to full screen as well.
document.addEventListener('DOMContentLoaded', () => {
const controls = [
'play-large', // The large play button in the center
'restart', // Restart playback
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'fullscreen', // Toggle fullscreen
];
const player = Plyr.setup('.js-player', {
controls
});
var plyr = document.querySelector('.js-player>.plyr');
var overlay = document.querySelector(".overlay")
plyr.append(overlay)
})#vid-cont {
position: relative;
width: 300px;
}
.overlay {
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: rgba(255, 0, 0, 0.25);
pointer-events: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
</head>
<body>
<div class="js-player" id="vid-cont">
<div class="overlay">
<h1>i am overlay</h1>
</div>
<video controls crossorigin playsinline class="js-player">
<!-- Video files -->
<h1>hello world i am text overlay</h1>
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
type="video/mp4"
size="1080"
/>
</video>
</div>
</body>
</html>