低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频

支持低版本IE的html5播放器演示

通常人们习惯用swf播放器来播放网络视频音频

HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频。video标签虽好,然而目前它却无法在旧版的IE浏览器中使用。所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下:

<embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

但是手上没有好的swf播放器怎么办?这个网站给出了一个还不错的插件:http://html5media.info/

html5media就是一个能让这两个标签在旧版IE浏览器中全面兼容的JavaScript类库。

html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架。使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式Flowplayer播放器。虽然,目前web播放器很多,但处理代码上并不简洁。

使用html5media让IE6/7/8浏览器支持HTML5的audio和video标签

1、首先在页面的head部分加入如下脚本

<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>

你可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。

2、然后再使用audio或video添加音频视频就行了

<!-- 视频媒体标签 -->

<video src="uiej.com.mp4" width="800" height="600" controls preload></video>

<!-- 音频媒体标签 -->

<audio src="uiej.com.mp3" controls preload></audio>

这样你便可以在IE8,甚至老掉牙的IE6浏览器中使用audio和video标签了。

3、演示页面

像这类为不支持html5标签而出现的JS项目,会随着HTML5浏览器和HTML5的优势展现会越来越多起来。

时间: 2024-10-14 16:58:56

低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的相关文章

直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法

摘自:http://www.uiej.com/1107.html 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频.video标签虽好,然而目前它却无法在旧版的IE浏览器中使用.所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下: <embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/

CSS3选择器、低版本解决方案及各浏览器私有前缀

一.基本选择器 通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持 二.层次选择器 后代选择器: div p a 子选择器:div>p 兄弟选择器:p+ul 通用选择器:p~a 通用选择器和兄弟选择器 选中的都是同一层次的兄弟选择器 唯一的区别是兄弟选择器选择的是相邻的第一个兄弟,通用选择器选择的是后面所有的兄第 子选择器.兄弟选择器.通用选择器   :   IE7+支持 三.伪类选择器 1.动态伪类选

video标签播放视频只有声音没有画面&amp;在iOS9中video标签播放无效

video标签定义视频,比如电影片段或者其他视频流.目前video标签只支持MP4,WebMail,Ogg格式的视频. 兼容性:IE8以及更早的版本不支持video标签.其他现代浏览器均支持. 各浏览器对于各个视频格式的支持如下: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器 标签的属性和各个值

【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效. 那么怎么解决呢?解决方式如下: 在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为

高版本的jdk编译过的项目移到低版本的JDK的eclipse中出错的问题

由于2台电脑安装的jdk版本不一样,导致从一台电脑移动项目到另一台电脑上时,运行出现了错误,错误信息如下: 主要是原先项目运行的JDK版本为1.8, 而要移过去的电脑的jdk是1.7的,首先已经把build path中的jre的版本换成了本机的1.7版本了,但是还是出现了上面的问题,上网找了一下,大致意思就是jdk的版本不一致造成的,但是真正不一致的地方是由于项目之前是在1.8版本上编译运行的,所有项目的属性中编译器的版本设定就是1.8了,所有只要这个设置与本机的JDK一样就可以了,具体设置是在

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android(4.3)中无法正常使用

使用VS2017开发VUE的APP应用遇到的问题集合 1,  打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是VS中安卓设置不正确,最后确定的问题是,低版本内置的浏览器(webview)版本太低,无法解析 ES2015最新的一些语法.需要在Webpack中配置babel-loader,还需要在项目最外层添加一个.babelrc文件用于babel默认解析ES2015中的特殊语法(例如: const,let等)

怎么使用CAD版本转换器,如何将高版本CAD转低版本?

怎么使用CAD版本转换器,如何将高版本CAD转低版本?在CAD行业中,每天都会接触到CAD图纸,而且在查看CAD图纸的过程中肯定会遇到许多的问题,那就是有的时候在查看dwg格式的CAD图纸的时候,不管怎么样都打不开,小编后来才知道是CAD文件的版本太高的缘故,不知道小伙伴们有没有遇到过这样的情况,那这样我们要怎么使用CAD版本转换器,又如何将高版本的CAD转低版本呢?具体要怎么来进行操作?那下面小编就来教教大家具体操作方法. 第一步:首先,打开电脑,在电脑桌面上任意的打开一个浏览器,在浏览器的搜

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

1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" autoplay="autoplay"> <source src="D:/video/hbg.mp4" type="video/mp4"> </video> 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能