这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

最近发现了一个问题,在手机录制了一个1.mp4文件,主流浏览器都能正常播放。但使用格式工厂将rmvb文件转码为2.mp4却不能播放。通过查找相关的资料终于解决了,下面分享出来供大家参考学习,下面来看看详细的介绍:

问题分析

手机录制的视频属性:

格式化工厂转码的视频属性:

首先排除代码问题,路径问题,浏览器不支持等问题。转码后的视频编码是mp4v,这是不能播放的原因,转换为AVC(H264)编码即可。

查阅文档,关于video标签所支持的视频格式和编码:

  • MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
  • WebM = 带有VP8视频编码和Vorbis音频编码的 WebM文件
  • Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件

通过上面的信息我们发现只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的<video>标签。

解决方法

video标签允许多个source元素,source元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式,这样可用来解决浏览器兼容问题。

1
2
3
4
5
<video controls="controls" width="100%">
  <source src="1.mp4" type="video/mp4">
  <source src="1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。


参考学习资料

最新文章

  1. memcached+magent实现memcached集群
  2. luogg_java学习_03_流程控制及循环结构
  3. 图的全局最小割的Stoer-Wagner算法及例题
  4. 安装ntp服务,并设置ntp客户端
  5. 【BZOJ】4636: 蒟蒻的数列
  6. mybatis获得刚刚插入的自增的值
  7. Elasticsearch强大的聚合功能Facet
  8. jquery入门知识点总结(转)
  9. MVC之图片验证码
  10. python列表的学习笔记
  11. head first c初探网络编程上
  12. 腾讯2019年暑期实习生招聘在线笔试技术研究和数据分析方向第二题(python)
  13. JavaScript数组删除指定元素
  14. setInterval与setTimeout 的区别
  15. ASP.NET的一些小问题
  16. redis的window客户端下载地址
  17. 如何彻底解决adb 5037端口被占用
  18. CF484E Sign on Fence &amp;&amp; [国家集训队]middle
  19. 用Java axis2调用.net平台的Webservice出现的一些问题
  20. juc原子类之五:AtomicLongFieldUpdater原子类

热门文章

  1. adb的使用
  2. dfs(通过控制点的编号来得出每个点的坐标)
  3. BroadcastReceiver的两种注册方式和使用
  4. JS判断页面是否出现滚动条
  5. ARMV8 datasheet学习笔记4:AArch64系统级体系结构之编程模型(3)- 异常
  6. 【实践】Matlab2016a的mdce集群搭建
  7. typeof引发的思考
  8. JUnit单元测试--IntelliJ IDEA
  9. window 连linux
  10. django----对model查询扩展