在移动设备上预加载 HTML5 视频

Question

我正在寻找解决方案，其中：

4 MP4s/video 个文件，每个文件大小为 5MB。

这些视频将像单个 MP4/video 文件一样一个接一个地播放（MP4 文件之间没有间隙）跨浏览器和跨设备。

你知道最好的方法是什么吗，我不是在寻找可以替换视频源文件的解决方案。（因为总会有差距）到目前为止，我有 2 个独立的视频元素，其中一个视频将在另一个视频播放时预加载，尽管在大多数移动设备上不支持预加载属性。

非常感谢任何答案，亚当

Answer 1

这不是一个优雅的解决方案，但它可以满足您在视频标签的多个实例中加载的想法。

在 HTML 中放置 5 个视频播放器。

在CSS中隐藏其中的4个(显示:none);

在 JS 中
制作视频对象的全局变量数组

var v=new Array;
v[1] = document.getElementById('player1');
...
v[5] = document.getElementById('player5');

在玩家 1-4 上为调用下一个函数的 "end" 事件添加事件侦听器。

next function(n){
  v[n+].style.display='block';
  v[n].style.display='none';
  v[n+1].play()
}

}

Preloading HTML5 videos on mobile