这篇文章主要给大家介绍了关于解决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>

总结

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


参考学习资料

解决html5中video标签无法播放mp4问题的办法的更多相关文章

  1. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  2. 关于HTML5中video标签的奇怪现象

    很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...

  3. HTML5中video标签与canvas绘图的使用

    video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

  4. html5的video标签自动播放

    概念澄清 这里的"自动播放",是指用户的视觉效果,并不一定是元素自身的自动播放. 查看相关文档后,有以下两种最简方案. 配置属性 发现有video标签有一个自动播放的属性autop ...

  5. html5 中video标签属性

      <video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...

  6. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  7. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  9. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

随机推荐

  1. javaScript之表格操作<一:新增行>

    DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...

  2. 转载 int和string 类型的互换

    https://blog.csdn.net/u012421436/article/details/51386690 不论是在什么语言下编程(除C,因为C是没有string类型的),int与string ...

  3. 实验一 Java开发环境的熟悉--20165221

    实验报告封面 课程:Java程序设计 班级:1652班 姓名:谭笑 学号:20165221 成绩: 指导教师:娄嘉鹏 试验日期:2018.4.2 实验组次:21 预习程度:已预习 实验时间:15:35 ...

  4. SpringMVC 使用@ResponseBody返回json 中文乱码与返回实体类报错

    有时候我们发现接收的是中文,返回却是个?.这确实是个蛋疼的问题,Spring中解析字符串的转换器默认编码居然是ISO-8859-1 /** * Implementation of {@link Htt ...

  5. latex对齐问题

    数学公式居中:可以在公式前后各加两个$$,就可以了 一行对齐:左对齐\leftline{内容} 居中\centerline{内容} 右对齐\rightline{内容} 多行或者段落对齐: 左对齐 \b ...

  6. ubuntu 下 teamview 取消自动启动 autostart

    sudo teamviewer daemon disable

  7. awk技巧【转】

    转自 awk技巧(如取某一行数据中的倒数第N列等) - 散尽浮华 - 博客园 https://www.cnblogs.com/kevingrace/p/8481965.html 使用awk取某一行数据 ...

  8. cacti系列(二)之cacti添加对tomcat服务器的监控

    cacti添加对tomcat的监控 1.首先下载监控tomcat的模板 TomcatStats-0.1.zip    2.导入模板 (cacti_host_template_tomcat_server ...

  9. 安装xcache3.0.3/3.2,为php加速

    安装xcache,为php加速 1.安装 # tar xf xcache-3.0.3.tar.bz2  # cd xcache-3.0.3 # /usr/local/php/bin/phpize # ...

  10. AS 中 Plugin for Gradle 和 Gradle 之间的版本对应关系

    Plugin for Gradle 和 Gradle 之间的版本对应关系 来源:https://developer.android.com/studio/releases/gradle-plugin. ...