跨浏览器兼容的HTML5视频音频播放器
演示demo 2016-07-28 15:53:31 前端笔记   

 h5video.jpg

XML/HTML Code复制内容到剪贴板
  1. <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>  
  2.        <div class="demo">  
  3.             <video class="video" poster="//media.html5media.info/poster.jpg" width="618" height="347" controls preload>  
  4.                 <source src="//media.html5media.info/video.mp4" media="only screen and (min-device-width: 568px)"></source>  
  5.                 <source src="movie.mp4" media="only screen and (max-device-width: 568px)"></source>  
  6.                 <source src="//media.html5media.info/video.ogv"></source>  
  7.             </video>  
  8.               
  9.             <br>  
  10.             <br>  
  11.   
  12.             <audio class="audio" controls preload>  
  13.                 <source src="//media.html5media.info/audio.mp3"></source>  
  14.                 <source src="//media.html5media.info/audio.ogg"></source>  
  15.             </audio>  
  16.        </div>  

 

 

 测了一下,IE8居然是兼容的

 

 


 

 

关于HTML5的video标签用法,可以参照

WEB中的Video标签

HTML5定义了一个新的元素用来指定标准的方式来插入视频文件到web页面中:<video>标签。使用video标签可以控制视频的播放与停止,循环播放,视频尺寸等等,详情请看下表。

属性 描述
autoplay true | false 如果是 true,则视频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
height 像素 设置视频播放器的高度。
loop true | false 完成播放后再次开始播放,即循环播放
poster url 当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来
src url 所播放视频的 url。使用子元素 <source> 实现更好。
width 像素 设置视频播放器的宽度。

目前支持<video>标签的浏览器有:

IE9,Firefox, Opera,Chrome和Safari都支持<video>标签。

注意:IE8和更早的版本,不支持<video>标签。

如何使用Video

要在HTML5中播放视频,需要在body中插入以下代码:

由于旧的浏览器和Internet Explorer不支持<video>元素,考虑到兼容性,我们必须为这些浏览器找到一个支持Flash文件的解决方案。不幸的是,和HTML 5音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用HTML 5视频,则需要创建三个视频版本。

OGG,MP4,FLV/SWF

XML/HTML Code复制内容到剪贴板
  1. <video width="320" height="240" controls>   
  2.    <!-- Firefox -->   
  3.    <source src="mv.ogg" type="video/ogg" />    
  4.    <!-- Safari/Chrome-->     
  5.    <source src="mv.mp4" type="video/mp4" />    
  6.    <!-- 如果浏览器不支持video标签,则使用flash -->    
  7.    <embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash"    
  8. width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"> </embed>    
  9. </video>    

 

 

HTML5 视频标签的注意事项

1、需创建三种视频格式以实现对 Firefox,Safari/Chrome 和 IE 的支持;

2、不要省略任何一种格式。不能将HTML 5如你所想的那样兼容 Firefox 和 Safari,Safari 能解释 <video> 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;

3、记住全屏显示不被 Safari 和 Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览;

4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 <video> 元素。然而,如果浏览器支持,则会期望加载合适的文件。

 

 


 

 关于HTML5的audio标签用法,可以参照

 

WEB中的Audio标签

HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签。使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等,详情请看下表。

属性 描述
autoplay true | false 如果是 true,则音频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置,默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

目前支持audio标签的浏览器有:

IE9,Firefox, Opera,Chrome和Safari都支持<audio>标签。

注意:IE8和更早的版本,不支持<audio>标签。

如何使用Audio

要在HTML5中播放音频,需要在body中插入以下代码:

XML/HTML Code复制内容到剪贴板
  1. <audio controls="controls">    
  2.    <source src="music.ogg" />   
  3.    <source src="music.mp3" />   
  4.    <source src="music.wav" />   
  5. </audio>   

 

可以在<audio>和</audio>标签之间插入文字内容,这样如果浏览器不支持audio,那么会显示这些文字。

也许你会问auto中怎么会包含3个source标签呢?这是为了浏览器和音频格式的兼容性,浏览器制造商并非都同意使用某一种音频文件格式。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。我们将每个视频文件名放在单独的 <source> 标签里,并且音频容器中的所有源标签都由<audio></audio> 构成,如下所示。那么,无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。

HTML5浏览器和音频格式兼容性

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

此外,不同浏览器音频空间外观也不一样。

HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容,不再需要外部音乐播放器,使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能,你可以轻松的在WEB页面上定制MP3播放器了。

本文来自于:http://www.yoyo88.cn/demo/27.html

Powered by yoyo苏ICP备15045725号-1