手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

js控制网页播放器MEDIA PLAYER的相关知识

首页 > Javascript >

没想过要用这个东西,但群里有人问,这个地址也是群里的朋友贴出来的,仔细想想这个东西也有应用的场景,比如歌词的控制。能够得到播放时间,就能够控制歌词的显示了。估计那些用JS做的播放器大致都是这样的吧?猜测而已

内容如下:http://roln.cn/archives/80

<!–播放器 开始–>
 <object id=”Exobud” style=”width: 273px; height: 64px” type=”application/x-oleobject”
  classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″>
  <param name=”URL” value=”"/>
  <param name=”rate” value=”1″/>
  <param name=”balance” value=”0″/>
  <param name=”currentPosition” value=”0″/>
  <param name=”defaultFrame” value=”"/>
  <param name=”playCount” value=”1″/>
  <param name=”autoStart” value=”-1″/>
  <param name=”currentMarker” value=”0″/>
  <param name=”invokeURLs” value=”-1″/>
  <param name=”baseURL” value=”"/>
  <param name=”volume” value=”80″/>
  <param name=”mute” value=”0″/>
  <param name=”uiMode” value=”full”/>
  <param name=”stretchToFit” value=”-1″/>
  <param name=”windowlessVideo” value=”0″/>
  <param name=”enabled” value=”-1″/>
  <param name=”enableContextMenu” value=”0″/>
  <param name=”fullScreen” value=”0″/>
  <param name=”SAMIStyle” value=”"/>
  <param name=”SAMILang” value=”"/>
  <param name=”SAMIFilename” value=”"/>
  <param name=”captioningID” value=”"/>
  <param name=”enableErrorDialogs” value=”0″/>
  <param name=”_cx” value=”7223″/>
  <param name=”_cy” value=”1693″/>
 </object> <!–播放器 结束–>
1 单项播放很简单,这里粗略的说一下
 通过网页传参在后台cs页面绑定一个变量
html
<param name=”URL” value=”<% = Url%>”/>
cs
public string Url;
Url = 从数据库中读取

2 让播放器播放多首歌曲并循环播放呢
思路就是建一个播放列表,然后通过js来控件.

第一种方法 (此方法最终行不通)
建立一个数组相当于播放列表alist(假设这是用户选择歌曲后的结果)

js
var num = 0
function Onload(){
var Exobud = document.getElementById(”Exobud”);
Exobud.URL = alist[num];
Exobud.controls.play();
num ++;
}
通过PlayStateChange监听播放状态 ,8表示播放结束
<script for=”Exobud” EVENT=”PlayStateChange(stats)”>
if(stats == 8 )
Exobud.URL = alist[num];
Exobud.controls.play();
//alert(Exobud.URL);
num ++
</script>
到此播放正常,当播放下一首歌的时候就定住了.非要手动去点播放.不知道是何原因?
在网上查,有一仁兄弟好像解决过这问题,说是放第二首歌的时候,仍然是在第一首歌的播放状态下,所以就一直是停的.
解决办法,就是每首歌只播放一次,但不知道改那里.播放器参数中每首歌是设的播放一次.
另一种办法就是加一个alert(Exobud.URL);这样就可以自动播放,但总弄个弹窗不好吧.
到现在还没弄明白是么回事.如有人知道请留言跟贴,帮我解决一哈.

第二种方法.现已解决.能正常使用. 思路就是用setTimeout()不停的循环,然后控件播放列表的索引得到值来改变URL

先建立一个播放列表
假设用户所选的歌曲参数已传过来
播放列表如下
<select name=”SongList” size=”5″ >
        OnDblClick=”player();”>
            <option value=”songs/001.mp3″>001</option>
            <option value=”songs/002.wma”>002</option>
            <option value=”songs/003.WMV”>003</option>
            <option value=”songs/004.mp3″>004</option>
            <option value=”songs/005.wma”>005</option>
 </select>
同时设置几个按钮
<a href=”#” onclick=”javascript:play();”>on</a>
<a href=”#” onclick=”javascript:Last_OneOK();”>last</a>
<a href=”#” onclick=”javascript:Next_OneOK();”>next</a>

js
<script language=”JavaScript”>
        //var server=’http://localhost/music/’;
        var SongList = document.getElementById(”SongList”);
        var Exobud = document.getElementById(”Exobud”);
        var TotalSongs = SongList.options.length;
        function play()
        {
        SongList.options[0].selected=true;
        player();
        }
        function player(){
      if(SongList.selectedIndex < 0) alert(’系统错误,请选择您要播放的曲目!’);
      else{
      var url;
      url = SongList.options[SongList.selectedIndex].value;
      Exobud.URL=url;
      //alert(TotalSongs);
      Exobud.controls.play();
      showTLab();
      return;
      }
        }
   
        function showTLab(){
      if(Exobud.playState == 1)
      Next_OneOK();
      setTimeout(”showTLab()”, 1000);
        }
   
        function Next_OneOK(){
      if(SongList.selectedIndex >= 0){
      if(SongList.selectedIndex < TotalSongs-1){
       SongList.options[SongList.selectedIndex + 1].selected = true;
        player();
      }else{
       SongList.options[0].selected = true;
        player();
      }
       }
         }
         function Last_OneOK(){
      if((SongList.selectedIndex > 0) && (SongList.selectedIndex < TotalSongs)){
      SongList.options[SongList.selectedIndex - 1].selected = true;
      player();
         }
         }
    </script>

这样问题就解决了.
注音乐文件都是我本地的

附上media player的一些控制方法

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: 播放器

« 上一篇 | 下一篇 »

6条记录访客评论

你的作法很奇怪。jQuery+原生。。。

Post by gouki on 2010, December 9, 9:23 PM 引用此文发表评论 #1

其实第一种方法可以改成这样:
    <script language="JavaScript" for="player" type="text/javascript" event="PlayStateChange(newstate)">  
        $('#state').text($('#state').text()+'#'+newstate);
        var player=document.getElementById("player");
        try{
            if (newstate==8){
                setTimeout("playNextVideo();", 1000);
            }
        }catch(ex){}
    </script>
这个贴子对我帮助很大,谢谢....

Post by dreambow on 2010, December 8, 11:58 PM 引用此文发表评论 #2

其实第一种方法可以改成这样:
<script language="JavaScript" for="player" type="text/javascript" event="PlayStateChange(newstate)">  
        var player=document.getElementById("player");
        try{
            if (newstate==8){
                setTimeout("playNextVideo();", 1000);
            }
        }catch(ex){}
    </script>

Post by dreambow on 2010, December 8, 11:56 PM 引用此文发表评论 #3

这个我没有过多的测试,你尝试一下,在IE或者FF下面是否都一致?

Post by gouki on 2009, June 3, 1:05 AM 引用此文发表评论 #4

你好,看到你这篇东西确实不错。
目前我有手头做个东西,是对一个整段的视频进行逻辑切割。
例如,录制了一个整段的新闻联播。接下来手动对新闻联播中的每条新闻开始位置和持续时间都标记好,存入数据库。在后期页面调用单条新闻时候,param的参数CurrentPosition的确有效,但是播放的持续时间不知道怎么处理。尝试了duration参数,好像无效。

Post by 周末 on 2009, June 2, 9:46 PM 引用此文发表评论 #5

很喜欢你的博客想和你做个友情连接!!
~~你的链接已经做好咯~~
博客名称: 欧莱诺
博客地址: www.ddpcr.cn/

Post by 欧莱诺 on 2009, April 23, 8:30 AM 引用此文发表评论 #6


发表评论

评论内容 (必填):