播放器

時間 2019-11-18

標籤播放简体版

原文原文鏈接

一、windows Media Player：（ie專用）css

屬性/方法名：	說明：
URL:String;	指定媒體位置，本機或網絡地址
uiMode:String;	播放器界面模式，可爲Full, Mini, None, Invisible
playState:integer;	播放狀態，1=中止，2=暫停，3=播放，6=正在緩衝，9=正在鏈接，10=準備就緒
enableContextMenu:Boolean;	啓用/禁用右鍵菜單
fullScreen:boolean;	是否全屏顯示
[controls]	wmp.controls //播放器基本控制
controls.play;	播放
controls.pause;	暫停
controls.stop;	中止
controls.currentPosition:double;	當前進度
controls.currentPositionString:string;	當前進度，字符串格式。如「00:23」
controls.fastForward;	快進
controls.fastReverse;	快退
controls.next;	下一曲
controls.previous;	上一曲
[settings]	wmp.settings //播放器基本設置
settings.volume:integer;	音量，0-100
settings.autoStart:Boolean;	是否自動播放
settings.mute:Boolean;	是否靜音
settings.playCount:integer;	播放次數
[currentMedia]	wmp.currentMedia //當前媒體屬性
currentMedia.duration:double;	媒體總長度
currentMedia.durationString:string;	媒體總長度，字符串格式。如「03:24」
currentMedia.getItemInfo(const string);	獲取當前媒體信息"Title"=媒體標題，"Author"=藝術家，"Copyright"=版權信息，"Description"=媒體內容描述，"Duration"=持續時間（秒），"FileSize"=文件大小，"FileType"=文件類型，"sourceURL"=原始地址
currentMedia.setItemInfo(const string);	經過屬性名設置媒體信息
currentMedia.name:string;	同 currentMedia.getItemInfo("Title")
[currentPlaylist]	wmp.currentPlaylist //當前播放列表屬性
currentPlaylist.count:integer;	當前播放列表所包含媒體數
currentPlaylist.Item[integer];	獲取或設置指定項目媒體信息，其子屬性同wmp.currentMedia

問題一：播放後（axWindowsMediaPlayer1.currentMedia.duration）沒法及時獲取播放文件的總時間html

方案：使用 axWindowsMediaPlayer1.newMedia(URL).duration （獲取的是總的毫秒數，url爲播放文件的路徑。）
jquery

一個小例子：web

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *                                      {padding:0px;margin:0px;font-size:12px;color:#333;font-family:"微軟雅黑"}
        .fl                                    {float:left}
        .clearfix:after                        {content: "."; display: block; height: 0!important; line-height: 0; font-size: 0; overflow: hidden; visibility: hidden; clear: both; }
        .clearfix                              {*zoom: 1; *display: table; }
        
        
        .player_box  {border:1px solid #0094ff;width:300px;background-color:#e1e1e1;margin:10px;padding:10px;}
        .btn         {background-color:#0094ff;color:#fff;margin-right:10px;width:50px;display:block;float:left;text-align:center;height:22px;line-height:22px;cursor:pointer}
        .jd_duration {width:180px;background-color:#cdcdcd;height:15px;position:relative;cursor:pointer;}
        .jd          {background-color:#0094ff;height:15px;}
        .jp-current-time,.jp-duration {position:absolute;top:16px;}
        .jp-current-time {left:0px;}
        .jp-duration {right:0px;}
        .dn          {display:none;}
    </style>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        //載入播放控件
        function LoadMusicControls() {
            var playBox = document.getElementById("playBox");
            var str = "";
            str += "";
            str += "<OBJECT id=\"WindowsMediaPlayer\" height=\"0\" width=\"0\" classid=\"clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6\" style=\"position:relative;left:0px; top:0px;width:0px;height:0px;\" class=\"musicojb\">";
            str += "<PARAM NAME=\"url\" VALUE=\"\">";
            str += "<PARAM NAME=\"rate\" VALUE=\"1\">";
            str += "<PARAM NAME=\"balance\" VALUE=\"0\">";
            str += "<PARAM NAME=\"currentPosition\" VALUE=\"0\">";
            str += "<PARAM NAME=\"defaultFrame\" VALUE=\"\">";
            str += "<PARAM NAME=\"playCount\" VALUE=\"1\">";
            str += "<PARAM NAME=\"autoStart\" VALUE=\"0\">";
            str += "<PARAM NAME=\"currentMarker\" VALUE=\"0\">";
            str += "<PARAM NAME=\"invokeURLs\" VALUE=\"0\">";
            str += "<PARAM NAME=\"baseURL\" VALUE=\"\">";
            str += "<PARAM NAME=\"volume\" VALUE=\"100\">";
            str += "<PARAM NAME=\"mute\" VALUE=\"-1\">";
            str += "<PARAM NAME=\"uiMode\" VALUE=\"none\">";
            str += "<PARAM NAME=\"stretchToFit\" VALUE=\"-1\">";
            str += "<PARAM NAME=\"windowlessVideo\" VALUE=\"0\">";
            str += "<PARAM NAME=\"enabled\" VALUE=\"-1\">";
            str += "<PARAM NAME=\"enableContextMenu\" VALUE=\"-1\">";
            str += "<PARAM NAME=\"fullScreen\" VALUE=\"0\">";
            str += "<PARAM NAME=\"SAMIStyle\" VALUE=\"\">";
            str += "<PARAM NAME=\"SAMILang\" VALUE=\"\">";
            str += "<PARAM NAME=\"SAMIFilename\" VALUE=\"\">";
            str += "<PARAM NAME=\"captioningID\" VALUE=\"\">";
            str += "<PARAM NAME=\"enableErrorDialogs\" VALUE=\"0\">";
            str += "<PARAM name=\"SendPlayStateChangeEvents\" value=\"0\">";
            str += "<PARAM name=\"SendOpenStateChangeEvents\" value=\"0\">";
            str += "<PARAM NAME=\"_cx\" VALUE=\"5080\">";
            str += "<PARAM NAME=\"_cy\" VALUE=\"5080\">";
            str += "<\/OBJECT>";
            playBox.innerHTML = str;
        }
        window.onload = function () {

            //加載播放控件
            LoadMusicControls();

            var oWindowsMediaPlayer = document.getElementById("WindowsMediaPlayer");
            var oControls = $(oWindowsMediaPlayer).find("");
            var oPlay = document.getElementById("play");
            var oPause = document.getElementById("pause");
            var oStop = document.getElementById("stop");
            var oSeekBar = document.getElementById("seekBar"), oSeekBarW = oSeekBar.offsetWidth;
            var oPlayBar = document.getElementById("playBar"); //進度條
            var oCurrentTime = document.getElementById("currentTime");
            var oDurationTime = document.getElementById("durationTime");
            // oWindowsMediaPlayer.controls.currentPosition  當前播放進度 時間
            // oWindowsMediaPlayer.currentMedia.duration  總播放長度 時間
            //play
            //alert(oWindowsMediaPlayer.newMedia("ILovedYou.wav").duration)
            var jd = null;
            oPlay.onclick = function () {
                var songName = "ILovedYou.wav"; //歌曲路徑
                this.style.display = "none";
                oPause.style.display = "block";
                if (!oWindowsMediaPlayer.URL) {
                    oWindowsMediaPlayer.URL = songName;
                };
                oWindowsMediaPlayer.controls.play();

                //顯示進度和時間
                jd = setInterval(function () {
                    //若是播放開始
                    if (oWindowsMediaPlayer.controls.currentPositionString) {
                        oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;
                        oDurationTime.innerHTML = oWindowsMediaPlayer.currentMedia.durationString;
                        //進度條
                        var nowJd = oWindowsMediaPlayer.controls.currentPosition;
                        var nowLen = oWindowsMediaPlayer.currentMedia.duration;
                        oPlayBar.style.width = Math.ceil(parseInt(nowJd * 10000 / nowLen, 10) * oSeekBarW / 10000) + "px";

                        //若是播放結束
                        //alert(oWindowsMediaPlayer.controls.currentPosition)
                        if ((oWindowsMediaPlayer.currentMedia.duration - oWindowsMediaPlayer.controls.currentPosition) * 100000 < 1) {
                            oWindowsMediaPlayer.controls.stop();
                            oCurrentTime.innerHTML = "00:00";
                            oPlayBar.style.width = "0px";
                            oPlay.style.display = "block";
                            oPause.style.display = "none";
                            clearInterval(jd);
                        }
                    }
                }, 10)
                //手動控制進度
                oSeekBar.onclick = function (event) {
                    var event = window.event || event;
                    var iLeft = window.event.offsetX;
                    oPlayBar.style.width = iLeft + "px";
                    oWindowsMediaPlayer.controls.currentPosition = Math.ceil((iLeft / oSeekBarW) * 10000) * oWindowsMediaPlayer.currentMedia.duration / 10000;
                    oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;
                };
            };
            //oPause
            oPause.onclick = function () {
                this.style.display = "none";
                oPlay.style.display = "block";
                if (oWindowsMediaPlayer.controls.isavailable('pause')) {
                    oWindowsMediaPlayer.controls.pause();
                };
                clearInterval(jd);
            };
            //stop
            oStop.onclick = function () {
                if (oWindowsMediaPlayer.controls.isavailable('stop')) {
                    oWindowsMediaPlayer.controls.stop();
                };
                oPlay.style.display = "block";
                oPause.style.display = "none";
                //進度條
                oPlayBar.style.width = 0;
                clearInterval(jd);
                oCurrentTime.innerHTML = "00:00";
                oSeekBar.onclick = null;
            };
        }

    </script>
    
</head>
<body>
    <div id="playBox" style="display:none"></div>
    <div class="player_box clearfix">
        <div class="fl">
            <span class="btn play_btn" id="play">play</span>
            <span class="btn oPause_btn dn" id="pause">pause</span>
            <span class="btn stop_btn" id="stop">stop</span>
        </div>
        <div class="jd_duration fl" id="seekBar">
            <div class="jd" id="playBar" style="width:0px;"></div>
            <div class="jp-current-time" id="currentTime">00:00</div>
			<div class="jp-duration" id="durationTime">00:00</div>
        </div>
    </div>
</body>
</html>

二、jPlayer（官方地址：http://www.jplayer.org/）windows

一個jquery插件，官方網站上有具體的使用方法。易上手。網絡

支持格式：less

HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), rtmp, flv

參考：http://www.blueidea.com/tech/web/2006/3494.aspjquery插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。