【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
爱站云低价服务器
高流量 图文广告位出售
高流量 图文广告位出售

网站首页 爱站云资源网 技术教程 正文

HTML5的初级技巧 之第五课

梦哥 2019-02-13 技术教程 0 评论 查看百度收录

15. 音频播放的支持


HTML5中提供了<audio>标签,解决了以往必须依靠第三方插件才能播放音频文件的问题。目前为止,还只有少数的最新浏览器支持该标签。


<audio controls=“controls“ autoplay=“autoplay“>

<source src=“file.ogg“ />

<source src=“file.mp3“ />

<a href=“file.mp3“>Download this file.</a>

</audio>


为什么会有两种格式的音频文件?因为Firefox和Webkit浏览器所支持的格式存在差异,Firefox只能支持.ogg文件,而Webkit只支持.mp3的文件,解决的办法就是创建两个版本的音频文件,这样就可以兼容Firefox和Webkit的浏览器了,需要注意的是IE不支持该标签。


16. 视频播放的支持


和<audio>标签一样,HTML5也提供了<video>标签对播放视频文件的支持。YouTube也宣布了一项新的HTML5的视频嵌入。不过有点遗憾,HTML5的规范并没有指定特定的视频解码器,而是让浏览器自己来决定。这就造成了个浏览器的兼容问题,虽然Safari和IE9都支持还H.264格式的视频( Flash 播放器可以可以播放),Firefox和Opera则支持开源的Theora和Vorbis格式。因此,当显示HTML5视频的时候,也得准备2种格式。


<video controls preload>

<source src=“cohagenPhoneCall.ogv“ type=“video/ogg“; codecs=‘vorbis, theora‘“ />

<source src=“cohagenPhoneCall.mp4“

type=“video/mp4; ‘codecs=‘avc1.42E01E, mp4a.40.2‘“ /> 

<div> your browser is old. <a href=“cohagenPhoneCall.mp4“>download this video instead.</a> </div>


</video>


需要注意的是,type属性虽然可以省略掉,但是如果加上的话,浏览器就可以更快的准确的解析该视频文件。并不是所有的浏览器都支持HTML5的视频,所以得做好使用Flash版本来代替,当然,这个决定权在于你。


17. 预加载视频


预加载属性:preload,首先要确定是否需要预先加载视频,假如,访客在访问一个有很多视频展示的页面,那么就有必要预先加载一段视频,这样可以节省访客的等待时间,提高用户体验。你可以给<video>标签添加一个preload属性来实现预先加载的功能。


<video preload=“preload“>

...

</video>


18. 显示控件


显示控件属性可以给视频添加一个播放暂停的控件,需要注意的是每个浏览器显示的效果可能会有些差异。


<video controls=“controls“ preload=“preload“>

...

</video>



猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:


温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

QQ:207385345
Phone:15684092120
E-mail:kf@heikw.com
Website:www.heikw.cn

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-BLOG 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证