Question

我在网站上使用<video>代码录制了一个视频。

我想平滑地改变视频源，而视频看起来不会在短时间内出现故障。

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

正如您所看到的，在加载新来源时视频会丢失宽度/高度，我已将红色边框显示效果。

可以重新创建问题的代码：

＆＃13;

<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>

＆＃13;

Answer 1

如果你想要的只是在加载下一个视频时真的要避免宽度/高度恢复到默认值（300 x 150），你只需要设置<video>的{{1}}和已加载视频（width和height的{{1}}属性是媒体的实际值，而不是元素的值。

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(); });或在触发后删除事件监听器。

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

1 个答案: