超简单的html5媒体播放器

/ 5评 / 0

上一篇文章介绍了10多个基于html5的音视频播放器,今天重点介绍其中一款:html5media
这款播放器最大的特点是只需要插入一段简单的代码,就可以使用html5代码在所有主流浏览器和手机上播放音视频。
这意味着你不用安装任何插件或辅助播放器。
示例:


1.如何使用
在页面的 标签中插入如下一段代码:

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

添加视频:在需要的地方插入如下代码:

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

添加音频:在需要的地方插入:

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

其它需要说明的地方:
1.给视频添加一个封面图片

  1. <video src="video.mp4" poster="poster.jpg" width="320" height="200"    
  2. controls preload></video>  

2.增加备用的视频格式
目前此播放器仅支持.mp4格式的视频,但有些浏览器不支持.mp4格式视频,所以需要添加备用的格式,如WebM 或Theora。你可以用Miro video converter对原视频进行转化成WebM或Theora格式。然后插入以下代码:

  1. <video width="320" height="200" controls preload>    
  2.     <source src="video.mp4"></source>    
  3.     <source src="video.webm"></source>    
  4. </video>  

3.支持手机播放
用Miro video converter转化视频适合手机播放,然后插入以下代码:

  1. <video width="618" height="347" controls preload>    
  2.     <source src="video.mp4" media="only screen and (min-device-width: 960px)"></source>   
  3.     <source src="video.iphone.mp4" media="only screen and (max-device-width: 960px)"></source>   
  4. </video>  

4.以上这些功能可以合并

  1. <video poster="poster.jpg" width="618" height="347"    
  2. controls preload>    
  3. <source src="video.mp4" media="only screen and (min-device-width: 960px)">   
  4. </source>    
  5. <source src="video.iphone.mp4" media="only screen and (max-device-width: 960px)">   
  6. </source>    
  7. <source src="video.ogv"></source>    
  8. </video>  

5.其它问题:
服务器不支持:Apache在根目录.htaccess文件里添加以下代码:

  1. AddType video/ogg .ogv   
  2. AddType video/mp4 .mp4   
  3. AddType video/webm .webm  

window服务器可以分别访问 IIS6IIS7获得帮助.
flash播放器安全设置: Flash Security Settings
MP4视频格式是否标准,使用Miro video converter转化成标准的视频格式。
官方网站:html5media

扫码关注我的微信公众号 安防视频监控知识

微信公众号ID:ipc-name

5 responses to “超简单的html5媒体播放器”

  1. hd says:

    这个不错,收藏了。 [奥特曼]

  2. 海 诺 says:

    不错收藏了。。。 :mrgreen:

  3. 土木坛子 says:

    功能还是可以,要是再方便些就好了,看好这个方向。

Leave a Reply

Your email address will not be published. Required fields are marked *