跨浏览器兼容的HTML5视频音频播放器

作者：月光光 2014年08月25日 18:35helloweba.com 标签：HTML5  网页播放器 

HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。

跨浏览器兼容的HTML5视频音频播放器
查看演示 下载源码

使用html5media.js可以在所有浏览器上观看html5视频和音频文件，它弥补了低版本IE浏览器不支持<video>和<audio>标签，只需要载入html5media.js使用<video>和<audio>标签就能跨浏览器播放视频和音频。

如何使用？

想让html5的video和audio标签能在所有浏览器上工作，必须在页面的head内部加入以下一行代码：

 <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>

然后你可以使用以下代码加入一段视频：

 <video src="video.mp4" width="320" height="200" controls preload></video>

你还可以使用以下代码加入一段音频：

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

关于HTML5的video标签用法，可以参照：http://www.helloweba.net/javascript/180.html。

关于HTML5的audio标签用法，可以参照：http://www.helloweba.net/javascript/177.html。

你可能感兴趣的文章

共18条评论

  • 有手机播放没声音，奇怪

    2016年12月29日 08:23

  • 地址解析问题，在//media.html5media.info/video.mp4前面加上http:就行了，类似的url也一样该就好

    2016年12月16日 16:57

  • 本地显示不了

    2016年10月27日 09:31

  • 很不错

    2016年08月27日 02:45

  • 亲测，Ie9，IE10，谷歌下没用

    2016年05月17日 09:52

  • 不介意收费的话，可以试试这个 www.fenhongxiang.com。

    2016年04月06日 18:06

  • 引用地址必须是绝对地址么？我下到本地引用就不起作用了？

    2015年12月24日 16:51

  • iE9以下都没效果[可怜]

    2015年07月21日 18:31

  • 本地视频怎么都不行啊！老显示没发现支持的视频格式和MIME类型！

    2015年07月02日 11:02

  • 我有问题想咨询，一下，我刚才用ie9试了一下，没有看到有全屏按键呢，怎么弄啊？

    2015年06月18日 10:20

  • 亲测IE7/8没效果

    2015年05月07日 12:48

  • 哇哦 太棒了，正好在找这个~~

    2014年12月22日 10:19

  • html5默认播放器为毛不显示总时长呢？
    多写这点代码，也不浪费他们时间吧。

    2014年11月29日 15:37

  • html5不错，但视频不那么容易拿到就好了

    2014年09月10日 16:12

  • 使用pre标签，然后借助一些代码插件可以高亮颜色显示源码，如搜索类似：jQuery code highlighter，你会找到你想要的。

    2014年08月30日 12:54

  • 您好，我想请教一个问题啊，怎么把html源码显示在页面上，还能用颜色区分出来。

    2014年08月29日 10:03

  • Good!

    2014年08月26日 11:12

  • 这个不错！！

    2014年08月26日 01:25