解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决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问题的办法的更多相关文章
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- 关于HTML5中video标签的奇怪现象
很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...
- HTML5中video标签与canvas绘图的使用
video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...
- html5的video标签自动播放
概念澄清 这里的"自动播放",是指用户的视觉效果,并不一定是元素自身的自动播放. 查看相关文档后,有以下两种最简方案. 配置属性 发现有video标签有一个自动播放的属性autop ...
- html5 中video标签属性
<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
随机推荐
- 修正iOS从照相机和相册中获取的图片方向
使用系统相机拍照得到的图片的默认方向有时不是ImageOrientationDown,而是ImageOrientationLeft,在使用的时候会出现图片顺时针偏转90°.使用fixOrientati ...
- CSS3动画常用demo
1.border动画 2.闪动动画(一闪一闪亮晶晶,满天都是小星星) .blink { animation: mymove 0.8s infinite; -webkit-animation: mymo ...
- 【网络编程1】网络编程基础-TCP、UDP编程
网络基础知识 网络模型知识 OSI七层模型:(Open Systems Interconnection Reference Model)开放式通信系统互联参考模型,是国际标准化组织(ISO)提出的一个 ...
- (DT系列五)Linux kernel 是怎么将 devicetree中的内容生成plateform_device【转】
转自:https://blog.csdn.net/lichengtongxiazai/article/details/38942033 Linux kernel 是怎么将 devicetree中的内容 ...
- nodejs async series 小白向
async.series({ flag1:function(done){ //flag1 是一个流程标识,用户自定义 //逻辑处理 done(null,"返回结果&qu ...
- nodejs 使用http模块保存源码
var xpath=require("xpath"); var fs=require("fs"); var dom = require('xmldom').DO ...
- jvm系列二、JVM内存结构
原文链接:http://www.cnblogs.com/ityouknow/p/5610232.html 所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemory ...
- nginx常见异常分析
1.nginx不转发消息头header问题 proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_ ...
- mysql锁表与不锁表设置主从复制的方法
有时候MySQL主从同步不一致比较严重的时候,需要手动同步.先说说在锁表的情况下如何操作:以下是其简要过程 1.先对主库锁表FLUSH TABLES WITH READ LOCK; 2.备份数据mys ...
- 安装ClamAV对centos系统进行病毒查杀
安装ClamAV 1.安装epel源 yum install epel-release 在安装了EPEL源后,运行下面的命令安装ClamAV # yum install clamav-server c ...