HTML5播放器 MediaElement.js 使用方法

发布时间:2020-06-25 15:45:28 作者:Web前端师
来源:网络 阅读:839

HTML5播放器 MediaElement.js 使用方法


目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们常用的html5视频格式(mp4,m4v,mov),而且还支持回退方式,即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放,从而达到支持绝大部分的浏览器。


备注:我们都知道进入HTML5时代以后W3C组织为web视频播放加入了一个非常友好的标签<video>,它可以让你直接插入mp4、mov等格式的视频,但是这是浏览器默认的方式,播放的功能也比较单一,所以借助MediaElement.js可以实现丰富的播放效果。


目前MediaElement.js所能支持的浏览器如图


首先MediaElement.js支持三种外观显示


默认效果


ted-外观


wmp-外观


外观设置方法:只需要在对应的<video>标签中加入对应的class 类即可<h3>Default Skin</h3>


<video width="640" height="360" srnsm/../media/echo-hereweare="video/mp4"


    id="player1" poster./media/echo-herewea


    controls="controls" preload="none"></video>复制代码


<h3>TED SKin</h3>


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>复制代码


<h3MP SKin</h3>


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样式表 并放置在<head> 标签中。.w3cfuns.com/jquery"></script>


ript src="hediaelement-and-player.min></script>


ink rel="styleshw3cfom/mediaelemecss" />复制代码


2. 调用视频文ideo src="htvideo.mp4" width="320" height="240"></video>复制代码


支持单一的h.264编码的视频文件(mp4),该方式适用于firefox,chrome,safari,已经ie9以上版本的主流浏览器。


flash回退


为了支持低版本的浏览器以及对不同用户群的支持,MediaElement.js提供了flash回退的方式,你可以采用以下代码进行调用。<vieo width="320" height="240" poster="poster.jpg" controls="controls" preload="none">


    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/webm" sr" />


    <!-- Ogg/Vorbis for older Firefox and Opera versions -->


   source type="video/ogg" src=


    <!-- Optional: Add subtitles for each language -->


    <track kind="subtitles" s


  - Optional: Add chapters -->


    <track kind="chapters" s>


    <!-- Flash fallback for non-<span class="wp_keywordlink_affilia href=tle="查看HTML5中的全部文章" targ>HTML5</aspan> browsers without JavaScript -->


    <object width="320" height="240" type="apa="flashmediaelement.


        <param name="movie" value="flashmediaeleme


        <param name="flashvars" value="controls=true&file=myvi


        <!-- Image as a last resort


        <img sridth="320" height="240" title="No video playback capabili


    </objec>


</video>复制代码


推荐阅读:
  1. 这几年为何web前端如此火爆?看完这篇文章你就知道了,真的牛批!
  2. Web安全,向“前”看!——读国内第一本Web前端***书

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web前端 edi

上一篇:一种简单的直接插入排序精解

下一篇:Linux下Nagios的安装与配置<< 二 >>

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》