html5视频加载的简单介绍

使用html5 video播放的视频加载很慢怎么优化

video autoplay="autoplay" loop="loop" src="video.ogg"/video

autoplay:当视频准备就绪就开始播放（不需要完全下载好，只要准备好了能播的时候就会马上播）

loop：循环播

相关问答

Q1: 使用html5的video标签打开视频加载慢怎么优化

可以缩短视频的大小，通过压缩缩短码率等方法。

还有可以通过其他视频插件去实现向jplayer~

Q2: html5标签,Safari报错,不能播放,播放加载时间长

safari浏览器，无论桌面还是safari的模拟响应式模式，还是真机上(h5,hybird)，都会有几率的报这个错。不是每次都报错嗷，但是10次里面有5-6次不是加载不出来，就是要等30s+。

failed to load resource: the network connection was lost.

加载失败:网络连接已中断

如果你也遇到safari里面的video加载请求 206 网络连接中断啥的，可以先curl看下 服务器支持分段加载不，因为safari要求必须要支持分段才行。如果可以分段，也是七牛CDN资源，看下缓存配置，视频资源是否回源了，七牛是有限制的。把七牛的缓存调整成1个月再试试~~

Q3: html5 video标签如何在可以在视频完全加载进浏览器后执行JS函数？

在js中使用document.getElementById("video")获取视频元素，加监听addEventListener("ended",

function

()

{

//要执行的函数内容

});

最近几周都在弄这个

Q4: 使用html5 video播放的视频加载很慢怎么优化？

new个video，指定播放列表的第一个视频路径为src。监听end事件，回调里面把video的src改成列表的下一个，再play

代码示例：

var vList = ['视频地址url1', 'url2', '...']; // 初始化播放列表

var vLen = vList.length; // 播放列表的长度

var curr = 0; // 当前播放的视频

var video = new Video();

video.addEventListener('end', play);

play();

function play(e) {

video.src = vList[curr];

video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可

video.play();

curr++;

if (curr = vLen) curr = 0; // 播放完了，重新播放

}

可以实现html5 播放多个视频。一个接一个的播放