<span id="pfnzv"></span>
      <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
      <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

        <sub id="pfnzv"><address id="pfnzv"></address></sub>
          <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
          <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

            <address id="pfnzv"></address>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

            當前位置:主頁 > 技術支持 > Javascript/JQuery > 網頁媒體播放利器-JW Player使用心得

            網頁媒體播放利器-JW Player使用心得

            時間:2024-06-03來源:風信官網 點擊: 1797次

            前段時間在做一個網站項目,要求能在線播放視頻、音樂,這個以前還真沒接觸過。恰好今天在壇子里閑逛時,發現有同志對這方面也感興趣,遂把這些整理了下,同時自己也可以復習下。

            播放器需要滿足以下需求:

            1. 支持所有主流瀏覽器

            2. 能與播放器交互,播放器必須提供必要的API

            3. 可定制外觀,方便后期擴展

            4. 支持flv、mp3、mp4格式,支持播放列表

            5. 詳盡的幫助文檔說明,方便開發者使用

            需求就是一切,咱沒條件只好硬著頭皮創建條件強上了~~~。于是瘋狂百度Google,發現了很多第三方播放器。由于咱E文實在不咋地,一開始想找個國內的??墒?,找來找去,發現都是要收費的。于是只好走上不愛國之路,只能找一個國外的了。在搜索中,綜合前輩們的意見,最終選擇了JW Player。搜索國外資源還是Google給力啊,不管你信不信,反正我是信了:)。

            JW Player是一款非常優秀的網頁媒體播放器,支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )視頻格式,MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音頻,同時也支持swf和圖片( gif 、jpg、png)和YouTube格式視頻。

            支持HTML5,有著非常豐富的插件可用(部分是收費的,如廣告插件)。

            JW Player的最新版是5.7,官方網址:http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist

             

            廢話到此為止,現在開始主題。令人振奮的是,JW Player使用起來非常方便,下面就探討一下JW Player的基本用法。

            第一步 從官網下載最新的播放器

            以上兩個選項不選,Viral是JW Player的一個插件,做視頻分享用的,需不需要自己看著辦。輸入郵箱即可下載。

            下載完成后,解壓出來有8個文件,如下圖:

            jwplayer.js和player.swf是核心文件,必須引入這兩個文件。

            JW Player Quick Start Guide.pdf是幫助文檔,里面講的也比較詳細了。

            第二步 體驗JW Player(基本用法)

            1. 在頁面head區域引用必要的js文件(本人習慣用jQuery,故引入了,使用其它框架的自行更改該部分)

            <script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>  
            <script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"></script>

             

             2. html結構如下

            <div id="container"></div>  
            <input type="button" class="player-play" value="播放" />  
            <input type="button" class="player-stop" value="停止" />  
            <input type="button" class="player-status" value="取得狀態" />  
            <input type="button" class="player-current" value="當前播放秒數" />  
            <input type="button" class="player-goto" value="轉到第30秒播放" />  
            <input type="button" class="player-length" value="視頻時長(秒)" />

             

            3. 初始化播放器,完成控制邏輯

            <script type="text/javascript">  
            var thePlayer;  //保存當前播放器以便操作  
            $(function() {  
                thePlayer = jwplayer('container').setup({  
                    flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',  
                    file: 'js/plugins/mediaplayer-5.7/video.mp4',  
                    width: 500,  
                    height: 350,  
                    dock: false  
                });  
                  
                //播放 暫停  
                $('.player-play').click(function() {  
                    if (thePlayer.getState() != 'PLAYING') {  
                        thePlayer.play(true);  
                        this.value = '暫停';  
                    } else {  
                        thePlayer.play(false);  
                        this.value = '播放';  
                    }  
                });  
                  
                //停止  
                $('.player-stop').click(function() { thePlayer.stop(); });  
                  
                //獲取狀態  
                $('.player-status').click(function() {  
                    var state = thePlayer.getState();  
                    var msg;  
                    switch (state) {  
                        case 'BUFFERING':  
                            msg = '加載中';  
                            break;  
                        case 'PLAYING':  
                            msg = '正在播放';  
                            break;  
                        case 'PAUSED':  
                            msg = '暫停';  
                            break;  
                        case 'IDLE':  
                            msg = '停止';  
                            break;  
                    }  
                    alert(msg);  
                });  
                  
                //獲取播放進度  
                $('.player-current').click(function() { alert(thePlayer.getPosition()); });  

                //跳轉到指定位置播放  
                $('.player-goto').click(function() {  
                    if (thePlayer.getState() != 'PLAYING') {    //若當前未播放,先啟動播放器  
                        thePlayer.play();  
                    }  
                    thePlayer.seek(30); //從指定位置開始播放(單位:秒)  
                });  
                  
                //獲取視頻長度  
                $('.player-length').click(function() { alert(thePlayer.getDuration()); });  
            });  
            </script>


            到此完成,接下來運行網頁就可以看到效果了。以下是一個截圖:

             

            關于更詳細的配置和說明文檔,請參閱官方文檔,說明非常詳盡。

            官方文檔:http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5

            欄目列表
            推薦內容
            熱點內容
            展開
            国产精久久久久无码AV动漫|最新亚洲精品国偷自产在线|2021亚洲色中文字幕在线|最新无码av中文字专区 情欲美妇紧致敏感 国产免费AⅤ片在线播放 人妻爽爽免费在线视频 51精品国产人成在线观看 色偷偷av一区二区三区
            <span id="pfnzv"></span>
                <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
                <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

                  <sub id="pfnzv"><address id="pfnzv"></address></sub>
                    <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
                    <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

                      <address id="pfnzv"></address>