video - 无法将 m3u8 格式的视频放入 video.js 中的 div
问题描述
我正在使用videojs
库在 HTML 网页中提供视频我的视频.h264
使用 Amazon Media Convert(.m3u8
视频 URL)编码为格式以提供视频。我想将视频拉伸到屏幕末尾,就像(图 1)没有任何黑条但是,我无法拉伸视频以适合整个屏幕,正在添加黑条(图 2)
源代码
<!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>
解决方案
三种再现之一是不同的纵横比,并在图像本身中包含黑条——视频覆盖了容器。它是三种再现中最小的一种,因此最有可能以特定布局显示。
推荐阅读
- excel - 有没有办法在 Excel 64 位的用户窗体上使用 DatePicker 而无需下载第三方插件?
- excel - Access Excel VBA在列下查找具有相同值的单元格
- mongodb - MongoDB Go 驱动程序重置连接
- api - 通过 API 恢复预约状态
- regex - 使用ansible在文件中查找带有$的单词
- graphql - 无法使用 graphql_base 模块从邮递员那里获取记录
- angular - 尝试到达外部 api 时 Angular 代理超时
- powershell - 在正在运行的 powershell 脚本中添加菜单选项
- angularjs - angularjs 将复选框值从整数更改为布尔值
- javascript - Javascript:查找数组中对某个键具有特定值的所有元素