从品牌网站建设到网络营销策划,从策略到执行的一站式服务
HTML5播放器 MediaElement.js 使用方法
创新互联专注于企业成都营销网站建设、网站重做改版、泌阳网站定制设计、自适应品牌网站建设、H5页面制作、商城系统网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为泌阳等各大城市提供网站开发制作服务。
目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们常用的html5视频格式(mp4,m4v,mov),而且还支持回退方式,即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放,从而达到支持绝大部分的浏览器。
备注:我们都知道进入HTML5时代以后W3C组织为web视频播放加入了一个非常友好的标签
目前MediaElement.js所能支持的浏览器如图
首先MediaElement.js支持三种外观显示
默认效果
ted-外观
wmp-外观
外观设置方法:只需要在对应的
复制代码
video class="mejs-ted" width="640" height="360" sr/media/echo-her type="video/mp4"
id="player1" poster=edia/echo-hereweare
controlscontrols" preload="none"video>复制代码
video class="mejs-wmp" width="640" height="360" sdia/echo-herewearp4" type="video/mp4"
id="player1" pos="../media/echo
controltrols" preload="none/video>复制代码
如何调用MediaElement.js ?
首先我们下载 MediaElement.js官方最新版
1.引用js脚本和css样式表 并放置在
标签中。.w3cfuns.com/jquery">ript src="hediaelement-and-player.min>
ink rel="styleshw3cfom/mediaelemecss" />复制代码
2. 调用视频文ideo src="htvideo.mp4" width="320" height="240">复制代码
支持单一的h.264编码的视频文件(mp4),该方式适用于firefox,chrome,safari,已经ie9以上版本的主流浏览器。
flash回退
为了支持低版本的浏览器以及对不同用户群的支持,MediaElement.js提供了flash回退的方式,你可以采用以下代码进行调用。
for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
urce type="video/mp4" s>
WebM/VP8 for Firefox4, Opera, and Chrome -->
source type="video/ogg" src=
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图