文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考。

HTML5可以用video标签来播放视频

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

列:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.
</video>
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式!
这样就确保了兼容所有浏览器

音频也是一样有一个audio标签

当前,audio 元素支持三种音频格式:

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis
MP3
Wav
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">Your browser does not support the audio tag.
</audio>

[转载]html5直接在网页上播放视频音频兼容所有浏览器的更多相关文章

  1. 网页上播放音频、视频Mp3,Mp4

    昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. ...

  2. PPT在HTML网页上播放方法

    项目中遇到一个需求:要求PPT在HTML网页上播放,而且要像电脑一样播放PPT,大家能想到的是什么方法? 印象中我好像有在网上见到过PPT模板网站上的PPT可以播放,赶紧百度搜了下发现都是用第三方软件 ...

  3. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  4. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  5. HTML5网页上播放mp4失败的原因

    HTML5先网页直接打开mp4 如果打不开 先用格式工厂转化下格式 转成mp4 avc编码 就行了 ps:ae要先导出mp4 然后再用上面的方法 不要导出avi 不然转化成 avc也是播放不了

  6. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

  7. 利用h5标签在网页上播放音乐

    方案1: <embed src="等一分钟.mp3" id="aa"> <input type=button value=暂停 onclick ...

  8. JS网页播放声音实现代码兼容各种浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. web 音频文件自动播放(兼容所有浏览器)

    function AudioPerform() { var ua = navigator.userAgent.toLowerCase(); var audiopath = "$!{Templ ...

随机推荐

  1. Linux 命令 - ls: 列出目录内容

    ls 命令很可能是用户最常使用的命令,通过 ls 命名可以查看目录内容,确定各种重要文件和目录的属性. 命令格式 ls [OPTION]... [FILE]... 命令参数 -a, --all 列出所 ...

  2. Git CMD - tag: Create, list, delete or verify a tag object signed with GPG

    命令格式 git tag [-a | -s | -u <keyid>] [-f] [-m <msg> | -F <file>] <tagname> [& ...

  3. C语言sprintf与sscanf函数[总结]

    sprintf函数 sprintf函数原型为 int sprintf(char *str, const char *format, ...).作用是格式化字符串,具体功能如下所示: (1)将数字变量转 ...

  4. Android虚拟机运行问题之小结

    首先说一下关于虚拟机的技巧,以前我也总是感觉电脑运行虚拟机的时候老是卡,后来在看课堂直播时看到老师用的是Total Control,在网上搜“Total Control”就能能找到,比系统自带SDK运 ...

  5. ### 学习《C++ Primer》- 9

    Part 9: 模板与泛型编程(第16章) // @author: gr // @date: 2016-03-18 // @email: forgerui@gmail.com 1. 模板参数 类型模板 ...

  6. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  7. using System.Threading;

    /// <summary> /// 执行动作:耗时而已 /// </summary> private void TestThread(string threadName) { ...

  8. Linux小白最佳实践:《超容易的Linux系统管理入门书》(连载五)Linux系统的对话方式

    本篇是Linux小白最佳实践第5篇,目的就是让白菜们了解Linux进程之间是如何对话的.之前连载的几篇,在微信上引起了很多的反响,有人也反映图多文字少,感觉没有干货.本篇选了大部分是实战讲解的&quo ...

  9. 抛弃 CSS Hacks 后的浏览器兼容方案

    一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: & ...

  10. WiFi安全之WPA介绍

    WPA,全称为Wi-Fi Protected Access,是一种保护WiFi安全的系统,实现了IEEE 802.11i的大部分标准,是一种替代WEP的过渡方案. 这个协议包含了前向兼容RC4的加密协 ...