加载另一个源时 HTML5 视频大小发生变化
Posted
技术标签:
【中文标题】加载另一个源时 HTML5 视频大小发生变化【英文标题】：HTML5 video size changes when loading another source 【发布时间】：2017-05-03 23:14:23 【问题描述】：我在网站上有一个使用<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>【问题讨论】：
【参考方案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以上是关于加载另一个源时 HTML5 视频大小发生变化的主要内容，如果未能解决你的问题，请参考以下文章