How to add an overlay text over video (using Plyr.io) video player on full screen mode?

Hannoun 0
Viewed 26

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.

plyr video-streaming video javascript html
1 Answers

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>

IT goldman0
Related