播放器

来源：互联网发布：360极速浏览器mac版本编辑：程序博客网时间：2024/04/23 14:31

1、windows Media Player：（ie专用）

属性/方法名：说明：URL:String;指定媒体位置，本机或网络地址uiMode:String;播放器界面模式，可为Full, Mini, None, InvisibleplayState: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-100settings.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）无法及时获取播放文件的总时间

方案：使用 axWindowsMediaPlayer1.newMedia(URL).duration （获取的是总的毫秒数，url为播放文件的路径。）

一个小例子：

<!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>

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

一个jquery插件，官方网站上有具体的使用方法。易上手。

支持格式：

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.asp

0 0