无法将 m3u8 格式的视频放入 video.js 中的 div答案

【问题标题】：Cannot fit m3u8 Format video to the div in video.js无法将 m3u8 格式的视频放入 video.js 中的 div
【发布时间】：2021-02-24 03:47:16
【问题描述】：

我正在使用 videojs 库在 HTML 网页中提供视频我的视频使用 Amazon Media Convert（.m3u8 视频 URL）编码为 .h264 格式以提供视频。我想将视频拉伸到屏幕的末尾，就像（图 1）一样，没有任何黑条但是，我无法拉伸视频以适应整个屏幕，正在添加黑条（图 2）

图片 1

图片 2

视频网址 - https://test-m3u8videos.s3.amazonaws.com/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1/16-35-22-056c9f0f-547d-437a-9144-2932a546b2b1.m3u8

源代码

    <!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>

【问题讨论】：

标签： video video.js m3u8 aws-media-convert

【解决方案1】：

三种再现中的一种是不同的纵横比，包括图像本身中的黑条——视频覆盖了容器。它是三种再现中最小的一种，因此最有可能以特定布局显示。

【讨论】：