成都网站制作之html5媒体播放器

2016-09-05    分类: 网站制作

这款播放器大的特点是只需要插入一段简单的代码,就可以使用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

新闻名称:成都网站制作之html5媒体播放器
URL链接:https://www.cdcxhl.com/news6/41956.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站托管运营