这篇文章主要给大家介绍了关于解决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. zabbix 源码分析 another/first network error wait for 15s seconds 出现原因及调优建议

    在监控设备的时候,在server端的日志中有时候会见到类似another network error, wait for 15s seconds的异常,今天我们看下这个问题的出现原因和解决方案: 问题 ...

  2. POJ3233 Matrix Power Series(快速幂求等比矩阵和)

    题面 \(solution:\) 首先,如果题目只要我们求\(A^K\) 那这一题我们可以直接模版矩乘快速幂来做,但是它现在让我们求$\sum_{i=1}^{k}{(A^i)} $ 所以我们思考一下这 ...

  3. extern的作用

    #include <stdio.h>extern int a;static int a;extern int b;int b;static int c;extern int c;

  4. mysql 案例~mysql元数据的sql统计

    一 简介:今天我们来收集下提取元数据的sql 二 前沿: information_schema  引擎 memory 元数据收集表 三 sql语句: 1#没有使用索引的表统计 SELECT t.TAB ...

  5. 【转】shell编程下 特殊变量、test / [ ]判断、循环、脚本排错

    [转]shell编程下 特殊变量.test / [ ]判断.循环.脚本排错 第1章 shell中的特殊变量 1.1 $# $# 表示参数的个数 1.1.1 [示例]脚本内容 [root@znix ~] ...

  6. 【转】Python中的运算符

    [转]Python中的运算符 说完常用的数据类型,再来说下运算符.运算符用于将各种类型的数据进行运算,让静态的数据跑起来. 编程语言中的运算大致分为以下几个大类: 算术运算, 用于加减乘除等数学运算 ...

  7. eclipse自动生成变量名声明(按方法返回值为本地变量赋值)

    eclipse自动生成变量名声明(按方法返回值为本地变量赋值) ctrl+2+L 这个快捷键可自动补全代码,极大提升编码效率! 注:ctrl和2同时按完以后释放,再快速按L.不能同时按! 比如写这句代 ...

  8. 利用mysqltuner工具对mysql数据库进行优化

    mysqltuner工具使用,本工具建议定期运行,发现目前MYSQL数据库存在的问题及修改相关的参数 工具的下载及部署 解决环境依赖,因为工具是perl脚本开发的,需要perl脚本环境 # yun i ...

  9. 利用pyecharts做地图数据展示

    首先, pip install pyecharts 为了地图上的数据能显示完全,加载好需要的城市地理坐标数据. pip install echarts-countries-pypkg pip inst ...

  10. js 数组、对象转json 以及json转 数组、对象

    1.JS对象转JSON 方式:JSON.stringify(obj) var json = {"name":"iphone","price" ...