等待后台视频完全加载，然后显示它

Question

我可以＆amp;我怎么能：

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

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

Answer 1

尝试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);