0

I'm using videojs library to serve the video in a HTML web page My videos are encoded to .h264 format using Amazon Media Convert (.m3u8 video URL) to serve the video. I want to stretch the video to the end of the screen like (Image 1) without any black strip But, I'm unable to stretch the video to fit entire screen, black strips are being added (Image 2)

Image 1 enter image description here

Image 2 enter image description here

Video URL - https://test-m3u8videos.s3.amazonaws.com/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1.m3u8

Source code

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset=utf-8 />
        <title>Responsive Video.js Test - JS Bin</title>

        <style type="text/css">
            .video-js .vjs-tech {
                object-fit: cover;
            }

            .left,
            .right {
                height: 70vh;
                width: 50%;
                position: fixed;
                /* overflow-x: hidden; */
                /* overflow: hidden; */
            }

            .left {
                left: 0;
                border: 1px solid black;
            }

            .right {
                right: 0;
                border: 1px solid black;
            }

            .container {
                width: 100%;
                height: 100vh;
            }

            .vjs-tech {
                object-fit: cover;
            }
            /* .d-contain {
                margin: 110px;
            } */
        </style>

        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <!-- <script src="/userui/videojs-contrib-hls.js"></script> -->

        <script src="https://unpkg.com/video.js/dist/video.js"></script>

    </head>

    <body>

        <div class="d-contain">
            <div class="left">
                <!-- <h1>Some random text on the left</h1> -->
                <div class="container">

                    <video id="video" class="video-js vjs-default-skin" controls preload="metadata" data-setup='{}'>
                                                <source src="https://test-m3u8videos.s3.amazonaws.com/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1.m3u8" type="application/x-mpegURL" />

                     </video>

                </div>
            </div>
            <div class="right">
                <h1>Some random text on the right</h1>
            </div>
        </div>

        <script>
            var player = videojs('video', {

            });
            var tempheight = document.querySelector('.left').offsetHeight;
            var tempdatawidth = document.querySelector('.left').offsetWidth;



            player.width(tempdatawidth);
            player.height(tempheight);
        </script>
    </body>

    </html>
Anirudh
  • 2,767
  • 5
  • 69
  • 119

1 Answers1

0

One of the three renditions is a different aspect ratio and includes the black bars in the image itself -- the video is covering the container. It's the smallest of the three renditions, so the one most likely to display with the particular layout.

misterben
  • 7,455
  • 2
  • 26
  • 47