HTML5 加载其他来源时视频大小发生变化

Question

我在网站上有一个使用 <video> 标签的视频。

我想平滑地切换视频源，而视频不会出现短时间的故障。

我的意思是：http://i.imgur.com/VD4FTpp.gif

如您所见，视频在加载新源期间丢失 width/height，我用红色边框显示了效果。

可以重现问题的代码：

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<video preload="metadata" autoplay poster="data:image/gif,AAAA" class="preview-video" id="video" style="border: 5px red solid;">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="videoSource">
 Your browser does not support the video tag.
</video>
       <br />
<br />
<button id="loadOther">Next Video</button>   

<script>
 $("#loadOther").click(function() {
  $("#videoSource").attr("src", "http://www.w3schools.com/html/mov_bbb.mp4");
        $("#video")[0].load();
 });
</script>

 
</html>

Answer 1

如果您真的只想在加载下一个视频时避免 width/height 到 return 为默认值 (300 x 150)，您只需设置 <video>的 width 和 height 属性为已加载视频的属性（videoWidth 和 videoHeight 是媒体的实际值，而不是元素的值）。

// fix the element's width and height properties to the current video ones
$("#video").on('loadedmetadata', function() {
  this.width = this.videoWidth;
  this.height = this.videoHeight;
});

$("#loadOther").click(function() {
  $("#videoSource").attr("src", "http://www.w3schools.com/html/mov_bbb.mp4");
  $("#video")[0].load();
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<video preload="metadata" autoplay poster="data:image/gif,AAAA" class="preview-video" id="video" style="border: 5px red solid;">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="videoSource">
    Your browser does not support the video tag.
</video>
<br />
<br />
<button id="loadOther">Next Video</button>

但是，如果下一个加载的媒体与前一个媒体的尺寸不同，此代码也会更改元素的宽度和高度。为避免这种情况，只需使用 .one() 或在事件侦听器触发后将其删除。

HTML5 加载其他来源时视频大小发生变化

HTML5 video size changes when loading another source

html

css

jquery

html5-video