jplayer.js 與 video.js

HTML5 - 兩款基於JS的視頻播放器

都是基於h5 video 標簽，如果不支持則會自動轉成flash，這里個人比較推薦使用jplayer;

1、video.js

pc端有時候會與視頻打交道，如果要兼容ie是個比較煩的事情，特別是對於沒有pc端經驗，比如我就更加煩。

我一開始是用的video.js ,因為開始看video.js api  http://videojs.com/getting-started/，看到這段代碼

 <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

非常喜歡，然后直接用，悲劇的是在ie 7、ie8存在一些問題，如各個版本的ie 樣式不一致，如果是高版本ie7報錯等！

果斷放棄；

2、jplayer.js

 

之所以推薦jplayer插件是因為它的兼容性是最好的，可以兼容到IE6，官網上對它兼容性有很詳細的說明

1、不僅兼容性好，而且樣式一致。

2、擴展性強。

api：http://www.jplayer.cn/developer-guide.html#jPlayer-event-object 

看完這個就會更加喜歡了，至少我是這樣的，因為這個東西可以定制化，隨便你怎么改

把圖標一換是不是有點像暴風語音。

使用注意事項：

jPlayer需要在服務器上上傳兩個文件：
jquery.jplayer.min.js
Jplayer.swf（如果不是放在js文件中，要注意路徑是否正確）

在兩個文件一定要上傳到服務器，開始使用的時候以為這個swf是在不支持視頻播放的時候要自己准備的swf,過10多分鍾才明白，jplay 不需要自己准備swf,他會自己轉碼，之所以會有這個想法完全是受之前vjdeo.js的影響。

代碼

 <script>
    //<![CDATA[
    $(document).ready(function () {

        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    title: "",
                    m4v: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.mp4",
                    webmv: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.webm",
                    poster: "@ViewHelper.Content("/content/img/video_bg.png")"
                });
            },
            swfPath: "../../content/js/jsplayer/videoResource/",
            supplied: "webmv, ogv, m4v",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });

    });
    //]]>
</script>

 <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
          
            <div class="jp-type-single">
                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                <div class="jp-gui">
                    <div class="jp-video-play">
                        <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                        @*<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>*@
                        <div class="jp-controls-holder">
                            <div class="jp-controls">
                                <button class="jp-play" role="button" tabindex="0">play</button>
                                @*<button class="jp-stop" role="button" tabindex="0">stop</button>*@
                            </div>
                            <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0">mute</button>
                                @*<button class="jp-volume-max" role="button" tabindex="0">max volume</button>*@
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value"></div>
                                </div>
                            </div>
                            <div class="jp-toggles">
                                @*<button class="jp-repeat" role="button" tabindex="0">repeat</button>*@
                                <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                            </div>
                        </div>
                        @*<div class="jp-details">
                            <div class="jp-title" aria-label="title">&nbsp;</div>
                        </div>*@
                    </div>
                </div>
                <div class="jp-no-solution">
                    <span>更新要求</span>
                    要播放媒體，您需要更新您的瀏覽器到最近的版本或更新您的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
                </div>
            </div>
        </div>

 

http://www.jplayer.cn/developer-guide.html#jPlayer-event-type  說的夠詳細了，demo也很多就不多說了，改改demo總有一款適合你。

可以多多看下官網的api，你就找到了方法，我這個分析的並不全面，如果大家有什么疑問，希望可以多多交流。