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

Question

我可以吗？我怎样才能:

• 让背景视频加载
• 在加载之前不显示它(使用 display/visibility/z-index 属性)
• 捕获视频已加载(如果存在且可靠!)并相应地更改CSS属性，以便我可以显示和播放背景视频

重点是，我想向我的用户显示背景视频，并且我不想破坏使用现代浏览器和低带宽的用户的用户体验 - 所以“等待下载然后播放”策略是我的选择 - 如果有可能。

Answer 1

尝试Media API这为您提供了您所需要的一切。

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

媒体 API 还包含一个 load() 方法，该方法:“导致元素重置并开始从头开始选择和加载新的媒体资源。”

等待 loadedmetadata或loadeddata (取决于您想要的)要触发的事件:

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