以下 HTML 不会产生 100% 的视频大小。如果我删除 <!DOCTYPE html>一切正常。
<!DOCTYPE html>
<html>
<head>
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>videojs.options.flash.swf = "video-js/video-js.swf"</script>
</head>
<body>
<video id="myVideo" class="video-js vjs-default-skin video-container" width="100%" height="100%" controls autoplay preload="auto" poster="poster.jpg" data-setup="{}">
<source src="test.mp4" type='video/mp4'/>
</video>
</body>
</html>
建议为每个 HTML 页面定义一个 DOCTYPE。我可以保留它，但它不适用于 IE 版本 < 10。
我搜索了那个问题并找到了 this solutions但它们不适用于我的 DOCTYPE。
我是否错过了一些基本的东西？
我正在使用 videojs 4.0.3。
编辑:根据提示和这个问题的答案，我在这里提供了一个解决方案:
<div class="video-container">
<video id="myVideo" class="video-js vjs-default-skin" controls autoplay preload="auto" poster="poster.jpg" data-setup="{}">
<source src="video.mp4" type='video/mp4'/>
</video>
</div>
和相应的CSS:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.video-container {
width: 100%;
height: 100%;
}
.video-js {
width: 100% !important;
height: 100% !important;
position: absolute !important;
z-index: 1;
}
最佳答案
我不知道这是为什么的确切细节，但我看到 html 文档类型(正确的 HTML5 文档类型)默认情况下 html 页面的宽度/高度不是 100%。如果您在 css 的某处添加以下内容，应该可以解决您的问题。
html, body { width: 100%; height: 100% }
关于css - 100% 的 html5 视频在没有 DOCTYPE 的情况下工作 (videojs)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16922126/