加载另一个源时 HTML5 视频大小发生变化答案

【问题标题】：HTML5 video size changes when loading another source加载另一个源时 HTML5 视频大小发生变化
【发布时间】：2023-03-09 18:18:01
【问题描述】：

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

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

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

正如您所见，视频在加载新源时会丢失宽度/高度，我已放置红色边框以显示效果。

可以重现问题的代码：

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

【问题讨论】：

标签： jquery css html html5-video

【解决方案1】：

如果您真的想要避免在加载下一个视频时将宽度/高度恢复为默认值 (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() 或在事件监听器触发后移除它。

【讨论】：

谢谢，不幸的是，这搞砸了移动支持，我正在使用引导程序，视频在引导程序列中。
然后尝试使用this.clientWidth 和this.clientHeight 而不是videoWidth