HTML5中Video开发会遇到哪些坑
HTML5中Video开发会遇到哪些坑？
楼主 社会人 来自 WEB全栈-HTML5+CSS3综合实战 2017-06-28 09:17:45 2人参与讨论
全部回复
-
-
天蓬元帅
增加了 `Access-Control-Allow-Origin` 后在 PC 端播放没问题，手机 iOS
端又提示跨域无法获取Video的纹理。
解决办法：从服务器部署上入手把HTML与视频地址放在同一个域。
## CDN造成的跨域问题
将HTML文件与视频文件部署到同一个域后开启CDN服务发现又出现跨域问题导致视频无法播放。
解决办法：通过抓包发现CDN在处理mp4文件时使用了302跳转，导致HTML与mp4不在同一个域，向CDN提供商提交问题后取消了302跳转问题解决。
## 部份浏览器无法播放mp4视频的问题
两个 mp4 的视频放在同一服务器上，其中一个视频在360浏览器、IE浏览器中视频显示为黑屏无法正常播放，在 Chrome 53.0
中可以播放。另一个均可以播放。
解决办法：经过视频比对发现两个视频编码格式不同。浏览器对H.264兼容比较好，将视频重新导出为H.264编码后播放正常。
端又提示跨域无法获取Video的纹理。
解决办法：从服务器部署上入手把HTML与视频地址放在同一个域。
## CDN造成的跨域问题
将HTML文件与视频文件部署到同一个域后开启CDN服务发现又出现跨域问题导致视频无法播放。
解决办法：通过抓包发现CDN在处理mp4文件时使用了302跳转，导致HTML与mp4不在同一个域，向CDN提供商提交问题后取消了302跳转问题解决。
## 部份浏览器无法播放mp4视频的问题
两个 mp4 的视频放在同一服务器上，其中一个视频在360浏览器、IE浏览器中视频显示为黑屏无法正常播放，在 Chrome 53.0
中可以播放。另一个均可以播放。
解决办法：经过视频比对发现两个视频编码格式不同。浏览器对H.264兼容比较好，将视频重新导出为H.264编码后播放正常。
我的回复
发表成功 M豆+5
每日可获得50M豆，免费兑换开发板
二维码
扫一扫，在手机上查看！
分享
所属分类 全部分类
相关课程
热门问题
FS-MP1A开发板课程视频上线啦，全部开源免费，周周更新，欢迎围观！
14 回答 来自 嵌入式
18 回答 来自 嵌入式
16 回答 来自 嵌入式