。这是因为在视频标签加载时,浏览器需要获取视频的元数据,包括视频的宽度和高度等信息。在获取到这些信息之前,浏览器无法正确地计算视频的宽高比,因此视频标签会显示默认的宽高比,导致视频在页面上的布局出现问题。
为了解决这个问题,可以通过以下方法来避免视频标签在加载时丢失宽高比:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
</video>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9宽高比 */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", function() {
var aspectRatio = video.videoWidth / video.videoHeight;
video.style.width = "100%";
video.style.height = "auto";
video.style.paddingBottom = (1 / aspectRatio) * 100 + "%";
});
</script>
以上是解决视频标签在第一次加载时丢失宽高比的几种方法。根据具体的应用场景和需求,可以选择适合的方法来确保视频在加载时能够正确地显示宽高比。
腾讯云相关产品推荐:腾讯云视频处理服务(云点播),该服务提供了丰富的视频处理功能,包括视频转码、视频截图、视频水印、视频拼接等,可以帮助开发者更好地处理和管理视频资源。
产品介绍链接地址:https://cloud.tencent.com/product/vod
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云