Question

以下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版本＆lt; 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;
}

Answer 1

我不知道确切原因的具体细节，但是我发现使用doctype html（正确的HTML5 doctype），默认情况下html页面的宽度/高度不是100％。如果您在css中的某处添加以下内容，那么应该可以解决您的问题。

html, body { width: 100%; height: 100% }

示例：http://jsbin.com/uyelud/1/edit

Answer 2

如果你正在使用Drupal，我只是编辑了videojs.tpl.php文件并取出了

width="<?php print $width; ?>"

并添加了width="100%"

100％的html5视频无DOCTYPE（videojs）

2 个答案: