MediaElement教程

最新推荐文章于 2024-03-09 15:35:42 发布

hzz532968708

最新推荐文章于 2024-03-09 15:35:42 发布

阅读量3k

点赞数

分类专栏： php 文章标签： jquery

本文链接：https://blog.csdn.net/hzz532968708/article/details/47071499

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

http://code.hs-cn.com/html/jQuery_Download.htm Jquery.min的各个版本链接及下载
http://jquery.com/download/ Jquery官网
http://www.css88.com/jqapi-1.9/ Jquery帮助文档
http://mediaelementjs.com/ 播放器MediaElement.js
http://www.cnblogs.com/gbin1/archive/2012/05/03/2480837.html
http://www.iteye.com/topic/1133212
http://mediaelementjs.com/#howitworks
http://designmodo.com/video-player/
MediaElement教程
我们在下载好的D:\PHPProj\JQuery\johndyer-mediaelement-0a97cd9中会看到一个test的官方案列，这是用Jasmined的单元测试框架来写的，具体可以看这里http://www.cnblogs.com/zhcncn/p/4330112.html

html5播放视频的参考文档：
http://www.w3school.com.cn/html5/html_5_video.asp

使用MediaElement时无法载入flash播放器，可能是服务器问题，mode设置的不同。

http://www.w3school.com.cn/html5/html_5_video.asp W3C
html5支持的视频格式只有MP4，webm与ogg这3种，如果需要播放其他格式，就需要flash组件才可以，现在先尝试用html5来播放视频。之后再根据需求来判断播放的组件。

1.下载MediaElement，将
- flashmediaelement.swf
- mediaelement-and-player.min.js
- silverlightmediaelement.xap
- jquery.js
- jquery-1.7.1.min.js
5个文件放入127.0.0.2/meplayer的build文件下，在html文件中加入引用：

<head>
    <meta charset="UTF-8">
    <title>Video Player</title>
    <!-- 连接JQuery库-->
    <script type="text/javascript" src="./build/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./build/jquery.js"></script>
    <!--连接mediaelement JS-->
    <script src="js/mediaelement-and-player.min.js"></script>
    <!--使用MediaElement自带的CSS-->
    <link rel="stylesheet" href="css/style.css" media="screen">

    <style type="text/css">

自定义css，加入循环播放按钮，设置播放其他格式文件，播放音乐

下面是完整的代码：

<<!DOCTYPE html>
<html debug="true">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML5 MediaElement</title>   

    <script src="firebug-lite/build/firebug-lite.js"></script>

    <script>
    if (typeof window.console == 'undefined') {
        window.console = {log:function() {}};
    }   
    </script>
  <!-- include source files here... --> 
    <script src="./build/jquery.js"></script>

    <script src="./src/js/me-namespace.js" type="text/javascript"></script>
    <script src="./src/js/me-utility.js" type="text/javascript"></script>
    <script src="./src/js/me-i18n.js" type="text/javascript"></script>
    <script src="./src/js/me-plugindetector.js" type="text/javascript"></script>
    <script src="./src/js/me-featuredetection.js" type="text/javascript"></script>
    <script src="./src/js/me-mediaelements.js" type="text/javascript"></script>
    <script src="./src/js/me-shim.js" type="text/javascript"></script>

    <script src="./src/js/mep-library.js" type="text/javascript"></script>
    <script src="./src/js/mep-player.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-playpause.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-progress.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-time.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-speed.js" type="text/javascript"></script>    
    <script src="./src/js/mep-feature-tracks.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-volume.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-stop.js" type="text/javascript"></script>
    <script src="./src/js/mep-feature-fullscreen.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./src/css/mediaelementplayer.css" />
    <link rel="stylesheet" href="./src/css/mejs-skins.css" />   

    <style>
    #container{
        width: 700px;
        margin: 20px auto;
    }

    #video-container {
        -sdisplay: none;

    }
    </style>
</head>
<body>

<div id="container">

<h1>MediaElementPlayer.js</h1>

<p>Recommended Setup</p>

<form>


<h2>MP3 audio (as src)</h2>

<audio id="player2" src="./media/One-Life-One- Love.mp3" preload="none" type="audio/mp3" controls="controls">
    <p>Your browser leaves much to be desired.</p>          
</audio>

<span id="audio-mode"></span>

<h2>MP4/WebM</h2>



<div id="video-container">

    <video width="640" height="360" id="player1" controls="controls" preload="none" poster="./media/dog.jpg">

        <source src="./media/despicable-me.mp4"  type="video/mp4" />    

        <track kind="subtitles" src="./media/mediaelement.srt" srclang="en"  ></track>

    </video>

</div>

<input id="showit" type="button" value="show it"  /><br>

<script>
$('#showit').on('click', function() {
    if ($('#video-container').is(':visible')) {
        $('#video-container').hide();
    } else {
        $('#video-container').show();
    }

    $('#player1')[0].player.setControlsSize();
});
</script>




<!-- <video width="640" height="360" id="player2" controls="controls"  preload="none" poster="./media/big_buck_bunny.jpg">
    <source src="../media/big_buck_bunny.mp4"   type="video/mp4" />

    <source src="./media/big_buck_bunny.mp4"   type="video/mp4" />
</video>


<br> -->

<!-- <video width="640" height="360" id="player3" controls="controls" preload="none" poster="../media/dog.jpg">
    <source src="../media/big_buck_bunny.mp4"   type="video/mp4" />

    <source src="./media/echo-hereweare.mp4"   type="video/mp4" />
</video> -->

<!-- <span id="video-mode"></span>
<div style="min-height: 400px">
<div id="video-events"></div>
<div id="video-props"></div>
</div>
 -->

</form>

</div>


<!-- <script>
function appendMediaEvents($node, media) {
    var 
        mediaEventNames = 'loadstart progress suspend abort error emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange'.split(' ');
        mediaEventTable = $('<table class="video-events"><caption><strong>Media Events</strong></caption><tbody></tbody></table>').appendTo($node).find('tbody'),
        tr = null,
        th = null,
        td = null,
        eventName = null,
        il = 0,             
        i=0;

    for (il = mediaEventNames.length;i<il;i++) {
        eventName = mediaEventNames[i];
        th = $('<th>' + eventName + '</th>');
        td = $('<td id="e_' + media.id + '_' + eventName + '" class="not-fired">0</td>');

        if (tr == null) 
            tr = $("<tr/>");

        tr.append(th);
        tr.append(td);

        if ((i+1) % 5 == 0) {
            mediaEventTable.append(tr);
            tr = null;
        }       

        // listen for event
        media.addEventListener(eventName, function(e) {

            var notice = $('#e_' + media.id + '_' + e.type),
                number = parseInt(notice.html(), 10);

            notice
                .html(number+1)
                .attr('class','fired');
        }, true);
    }   

    mediaEventTable.append(tr);
}

function appendMediaProperties($node, media) {
    var /* src currentSrc  */
        mediaPropertyNames = 'error currentSrc networkState preload buffered bufferedBytes bufferedTime readyState seeking currentTime initialTime duration startOffsetTime paused defaultPlaybackRate playbackRate played seekable ended autoplay loop controls volume muted'.split(' '),
        mediaPropertyTable = $('<table class="media-properties"><caption><strong>Media Properties</strong></caption><tbody></tbody></table>').appendTo($node).find('tbody'),
        tr = null,
        th = null,
        td = null,
        propName = null,    
        il = 0,     
        i=0;

    for (il = mediaPropertyNames.length; i<il; i++) {
        propName = mediaPropertyNames[i];
        th = $('<th>' + propName + '</th>');
        td = $('<td id="p_' + media.id + '_' + propName + '" class=""></td>');

        if (tr == null) 
            tr = $("<tr/>");

        tr.append(th);
        tr.append(td);

        if ((i+1) % 3 == 0) {
            mediaPropertyTable.append(tr);
            tr = null;
        }
    }   

    setInterval(function() {
        var 
            propName = '',
            val = null,
            td = null;

        for (i = 0, il = mediaPropertyNames.length; i<il; i++) {
            propName = mediaPropertyNames[i];
            td = $('#p_' + media.id + '_' + propName);
            val = media[propName];
            val = 
                (typeof val == 'undefined') ? 
                'undefined' : (val == null) ? 'null' : val.toString();
            td.html(val);
        }
    }, 500);    

}

</script> -->


<script  type="text/javascript">
$('audio, video').bind('error', function(e) {

    //console.log('error',this, e, this.src, this.error.code);
});

jQuery(document).ready(function() {
    $('audio, video').mediaelementplayer({
        //mode: 'shim',

        pluginPath:'./build/', 
        enablePluginSmoothing:true,
        loop: true,
        //duration: 489,
        //startVolume: 0.4,
        enablePluginDebug: true,
        //iPadUseNativeControls: true,
        //mode: 'shim',
        //forcePluginFullScreen: true,
        //usePluginFullScreen: true,
        //mode: 'native',
        //plugins: ['silverlight'],
        //features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
        success: function(me,node) {
            // report type
            var tagName = node.tagName.toLowerCase();
            $('#' + tagName + '-mode').html( me.pluginType  + ': success' + ', touch: ' + mejs.MediaFeatures.hasTouch);


            if (tagName == 'audio') {

                me.addEventListener('progress',function(e) {
                    //console.log(e);
                }, false);

            }

            me.addEventListener('progress',function(e) {
                //console.log(e);
            }, false);


            // add events
            if (tagName == 'video' && node.id == 'player1') {
                appendMediaProperties($('#' + tagName + '-props'), me);
                appendMediaEvents($('#' + tagName + '-events'), me);

            }
        }       
    });



});

</script>


</body>
</html>