等待背景视频完全加载，然后显示

Wait for background video to load completely, then show it

本文关键字：然后 显示 加载 背景 视频 等待      更新时间：2023-09-26

我能；我该怎么办：

  • 允许加载背景视频
  • 在加载之前不显示它（具有display/visibility/z-index属性）
  • 捕获视频loaded（如果存在并且可靠！）并相应地更改CSS属性，以便我可以显示和播放背景视频

关键是，我想向用户显示背景视频，我不愿意破坏现代浏览器和低带宽用户的用户体验，所以如果可能的话，"等待下载然后播放"策略是我的选择。

尝试Media API，它为您提供所需的一切。

var your_video = document.getElementById('myVideo');
your_video.src = 'my_video_' + value + '.ogg';
your_video.load();

Media API还包含一个load（）方法，该方法："使元素重置并开始从头开始选择和加载新的媒体资源。"

等待loadedmetadata或loadeddata（取决于您想要的）事件触发：

your_video.addEventListener('loadeddata', function() {
   // your_video is loaded and can be played
}, false);
相关文章：