问答

html5 video 标签如何缓存

作者:admin 2021-04-21 我要评论

video controls width="250" preload="auto" source src="/public/69b0710b41ba4b3ade2c.mov" type="video/webm" Sorry, your browser doesn't support embedded...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<video 
    controls 
    width="250"
    preload="auto"
>
    <source
        src="/public/69b0710b41ba4b3ade2c.mov" 
        type="video/webm"
    >
        Sorry, your browser doesn't support embedded videos.
</video>

案例:
当我在页面中完整看完一段视频,然后手动断开网络,重新播放会发现视频无法播放,如果有用到缓存应该是可以播放的

造成的问题:
重复播放同一视频的时候浪费流量

测试:
通过 chrome 的 netwwork 发现并没有(disk cache)用到缓存 即每次播放都重新请求了数据

如何解决这一问题?

###

标签本身无法缓存,你需要自己在服务器响应中加上缓存头,如果服务器不受你控制,你无法对服务端配置做出修改,那么可以考虑使用service worker的缓存功能。具体可以看我的文章,重点关注缓存部分: https://blog.dteam.top/posts/...

###

video这里数据,默认是浏览器自动处理缓存,是可以缓存较少一部分内容的,但想完整缓存,需要额外的处理。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • html5 video 标签如何缓存

    html5 video 标签如何缓存

  • c++ 怎样重载&lt;&lt;操作符才

    c++ 怎样重载&lt;&lt;操作符才

  • react this

    react this

  • 请问forge加载模型的周期是怎么样的?

    请问forge加载模型的周期是怎么样的?

腾讯云代理商
海外云服务器