前端 - 官网首页首屏播放视频如何优化？快速加载不卡顿？
有个视频大概10M.我希望用户首屏能看到。现在我的逻辑是先下载完成，这样能保证流畅播放。但是发现，下载时间受网络影响，大概需要6s。领导不满意。我不知道应该如何去优化了。如果使用默认自动播放，那用户网速慢的话。会加载卡顿不流畅。
共有3个答案
10M视频不算大。
- 放在CDN上
- 可以试试压缩+降低分辨率
- 可以试试把视频文件分片，然后同时下载多个分片。加载了一个分片就能开始播放了，和下载其他分片了。
压缩成H.264可以用FFmpeg进行压缩，视频没加载完的时候可以截取视频的第一帧作为背景图，把视频文件部署在内容分发网络（CDN）上，这些方法都算比较常用的手段
CDN呗，一般自己服务器的带宽会有限制，所以CDN的话会快很多。
另外就是直接播放就行了，带宽足够的情况下 10M 的视频基本上不会卡顿的（特别是在你给领导演示或者领导自己看的时候）。
-
本文向大家介绍vue如何优化首页的加载速度？相关面试题，主要包含被问及vue如何优化首页的加载速度？时的应答技巧和注意事项，需要的朋友参考一下 补充下2楼： ssr直出， webpack压缩HTML/CSS/JS， 首屏css单独提取内联， 关键资源Proload， 图片：不缩放，使用webp、小图片base64，iconfont， gzip, dns-prefetch， 静态资源单独域名，去掉c
-
本文向大家介绍浅谈vue首屏加载优化，包括了浅谈vue首屏加载优化的使用技巧和注意事项，需要的朋友参考一下 本文介绍了浅谈vue首屏加载优化，分享给大家，具体如下： 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-
-
本文向大家介绍浅谈VUE单页应用首屏加载速度优化方案，包括了浅谈VUE单页应用首屏加载速度优化方案的使用技巧和注意事项，需要的朋友参考一下 单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方（如OSS），减小服务器压力 按需加载三方资源，如iview,建议按需引入iview中的组件 使
-
本文向大家介绍详解vue项目首页加载速度优化，包括了详解vue项目首页加载速度优化的使用技巧和注意事项，需要的朋友参考一下 凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不吝赐教。 1: 针对第三方js库的优化 我们项目里用到的第三方js库主要有：vue, vue-router,
-
本文向大家介绍浅谈Vue SPA 首屏加载优化实践，包括了浅谈Vue SPA 首屏加载优化实践的使用技巧和注意事项，需要的朋友参考一下 写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案！ 我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用 element-ui ， ajax方案选用 axios, 并引入vuex ，使用 vu
-
如上，我提出来无法保证加载速度和流程播放。请求还有其他办法解决吗？