【即将关站通知●已关闭注册功能】,倒计时剩余:计算中...

[建站技巧] HTML5视频音频播放器跨浏览器兼容mp4

[复制链接]
魔趣吧站长魔趣吧官方成员 实名认证 发表于 2018-4-20 16:32:27 | 显示全部楼层 |阅读模式
HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。
' w& |& }( Y% E" Y; b3 d<video src=“http://gslb.miaopai.com/stream/NnUkS0dEYomMtCVnOYiIFQ__.mp4” width=“596”height=“336” controls=“true” autoplay=“true”></video>
$ f6 }- J# |0 n0 f8 Y' S5 f
使用html5media.js可以在所有浏览器上观看html5视频和音频文件,它弥补了低版本IE浏览器不支持<video>和<audio>标签,只需要载入html5media.js使用<video>和<audio>标签就能跨浏览器播放视频和音频。
如何使用?
想让html5的video和audio标签能在所有浏览器上工作,必须在页面的head内部加入以下一行代码:
  1. <script src="http://ods55zdgr.bkt.clouddn.com/html5media.min.js"></script>
复制代码
然后你可以使用以下代码加入一段视频:
  1. <video src="video.mp4" width="320" height="200" controls="true" autoplay="true"></video>
复制代码
你还可以使用以下代码加入一段音频:
  1. <audio src="audio.mp3" controls preload></audio>
复制代码
关于HTML5的video标签用法:
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用object和embed标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏览器必须安装第三方插件:Adobe Flash Player。而HTML5的到来,改变了这一事实,WEB开发者只需要使用video标签就可以轻松加载视频文件,而不需要任何第三方插件。
未来的WEB将可以在任何终端,任何平台只需通过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
像素
设置视频播放器的宽度。
0 ~; A9 N% s) {
目前支持<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
  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"   
复制代码
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页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件。而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash、Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站。
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
定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

. X8 E& G9 H* }* m0 a2 ?) Z
目前支持audio标签的浏览器有:
IE9,Firefox, Opera,Chrome和Safari都支持<audio>标签。
注意:IE8和更早的版本,不支持<audio>标签。
如何使用Audio
要在HTML5中播放音频,需要在body中插入以下代码:
  1. <audio controls="controls">  
  2.    <source src="music.ogg" />
  3.    <source src="music.mp3" />
  4.    <source src="music.wav" />  </audio>
复制代码
你可以在<audio>和</audio>标签之间插入文字内容,这样如果浏览器不支持audio,那么会显示这些文字。
也许你会问auto中怎么会包含3个source标签呢?这是为了浏览器和音频格式的兼容性,浏览器制造商并非都同意使用某一种音频文件格式。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。我们将每个视频文件名放在单独的 <source> 标签里,并且音频容器中的所有源标签都由<audio></audio> 构成,如下所示。那么,无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。
HTML5浏览器和音频格式兼容性
音频格式ChromeFirefoxIE9OperaSafari
OGG
支持
支持
支持
不支持
不支持
MP3
支持
不支持
支持
不支持
支持
WAV
不支持
支持
不支持
支持
不支持
0 D. J: |" G% R% z% N/ c/ X
此外,不同浏览器音频空间外观也不一样。
[url=http://www.yunaw.com/wp-content/uploads/2017/02/17ab1475085407.png][/url]
6 N* J; y& S( x, m, L
HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容,不再需要外部音乐播放器,使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能,你可以轻松的在WEB页面上定制MP3播放器了。
' ?$ D2 H, `' E, s2 P

魔趣吧版权声明1,本文内容及相关资源来源于网络,版权归版权方所有!本站原创内容版权归本站所有,请勿转载!
2,本文内容仅代表作者本人观点,不代表本网站立场,作者文责自负,本站资源仅供学习研究,请勿非法使用,否则后果自负!请下载后24小时内删除!
3,本文内容,包括但不限于源码、文字、图片等,仅供参考使用,本站不对其安全性,正确性等作出保证。但本站会尽量审核会员发表的内容
4,如您认为本文内容侵犯了您的权益,请与我们联系!我们将在5个工作日内做出处理!本站保留全部修改、解释、更新本声明的权利魔趣吧

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线支持
关闭
欢迎来到魔趣吧
如果你有建站技术问题、仿站需求、模板插件修改需求,请联系我们的技术支持!高效率,低价格的帮你搞定!
请认准魔趣吧唯一官网:www.moqu8.com,谨防假冒网站!

一般问题请到【求助区】发帖咨询(免费)!

邮箱咨询:
winkill2012@qq.com

邮箱咨询需注明:资源地址+本站用户名+具体问题,三者缺一不做处理。非本站资源不处理!
在线支持
快速回复 返回列表

关于魔趣吧|魔趣建站

魔趣吧,志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz精仿模板、PHPWind模板、phpcms模板、Discuz精仿插件、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2024 魔趣吧 ( 豫ICP备2021024354号 )   豫公网安备41030402000182号 百度统计
HTTPS安全认证
|网站地图 | 已运行:天 
温馨提示:本站所有资源、教程、源码,不得用于非法站点及用途,否则,本站将终止提供任何服务! Powered by Discuz! Licensed