1

以下 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。

我已经搜索了这个问题并找到了这个解决方案，但它们不适用于我的 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;
}
4

2 回答 2

1

I dont' know the exact details as to why this is, but with I'm seeing that with doctype html (the correct HTML5 doctype) the width/height of the html page is not 100% by default. If you add the following somewhere in your css, that should fix your issue.

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

Example: http://jsbin.com/uyelud/1/edit

于 2013-06-04T18:05:16.223 回答
0

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

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

并添加width="100%"

于 2014-03-05T14:59:57.263 回答