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

Posted 2023-04-14

网页上的使用html5的video标签，加载速度很慢，有什么办法可以优化

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

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

loop：循环播

追问

加了autoplay还是很慢

追答

你的视频文件多大？尽量处理小一点；

参考技术A video标签有个preload属性，字如其意，它是用来【控制视频的预加载方式】的，它有三个值：auto、metadata、none。
各浏览器默认值不同，IE默认是metadata（这也是W3C标准推荐的，它会加载视频的基本信息），其它主流浏览器默认为auto（这个默认加载的就更多）；而我推荐你设置为none，这样页面初始化时就不会加载任何视频内容，不会占用网络了。
补充：虽然W3C推荐使用metadata，但我测试的时候，这个选项其实下载的内容也有好几M，所以我个人不推荐。

js使用video标签当切换视频时会显示上一个视频的

参考技术A js使用video标签当切换视频时会显示上一个视频是video标签没有改。如果直接把标签替换掉的话，第一次是可以播放，但再切换别的src还是会显示第一个播放的视频的src。所以，正确方法是连同video标签一起换了。