您现在的位置: 365建站网 > 365学习 > js(jquery)控制 midea player 播放器(控制页面音乐播放)

js(jquery)控制 midea player 播放器(控制页面音乐播放)

文章来源:365jz.com     点击数:3000    更新时间:2015-09-16 20:11   参与评论

以下为原码(我调用的是本地的文件):

<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/JavaScript" src="jQuery/jquery-1.2.6.min.js"></script>   //这里导入的一个jQuery
<script type="text/javascript">
 //得到所有的歌曲
 var songList = $("#SongList");
 var player = $("#player");
 
 //这个函数用于播放歌曲
 function playMusic(url){
  var Exobud = document.getElementById("player");    //得到播放器(object对象)
  Exobud.URL = url;                                                      //改变播放器的URL地址
  Exobud.controls.play();                                             //播放音乐
  showTLab();                  
 }
 
 //初始第一首歌
 $(function(){
  var url = $("#SongList>option:first").attr("value");
  //第一首歌的状态设置为选择
  $("#SongList>option:first").attr( "selected","true" );
  playMusic(url);
  })
 
 
 //双击换歌
 $(function(){
  $("#SongList").dblclick(function(){
   var url = $("#SongList>option:selected").attr("value");
   playMusic(url);
  });    
 })
 
 //下一首换歌
 $(function(){
  $("#nextAId").click(function(){
   var url = $("#SongList>option:selected+option").attr("value");
   $("#SongList>option:selected+option").attr("selected","true");
   playMusic(url);      
   });   
  })
 
 //上一首换歌
 $(function(){
  // alert($("#upAId").html());
  $("#upAId").click(function(){
   // alert($("#SongList>option:selected").prev("option").attr("value"));
   var url = $("#SongList>option:selected").prev("option").attr("value");
   //$("#SongList>option:selected").attr("selected","true");
   $("#SongList>option:selected").prev("option").attr("selected","true");
   playMusic(url);   
   });   
  })
 
 //一直监控换歌 的情况
  function showTLab(){
  var Exobud = document.getElementById("player");
    if(Exobud.playState == 1)
    {
   var url = $("#SongList>option:selected+option").attr("value");
   $("#SongList>option:selected+option").attr("selected","true");
   playMusic(url);      
    }
    setTimeout("showTLab()", 1000);
        }

</script>
</head>

<body>
<div id="myDiv">
</div>
<br />
<!-- 以下是要播放的歌曲-->
<select id="SongList" name="SongList" size="5" style="width:100%" >
  <option value="music/01.生生世世爱.mp3">生生世世爱</option>
  <option value="music/02.忘记时间.mp3">忘记时间</option>
  <option value="music/03.此生不换.mp3">此生不换</option>
  <option value="music/05.答应不爱你.mp3">答应不爱你</option>
  <option value="music/06.偏爱.mp3">偏爱</option>
  <option value="music/cc.wmv">东搞西搞</option>
</select>
<br />
<object id="player" height="266" width="360" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">
<!--是否自动播放;0则不自动播放-->
<param NAME="Balance" VALUE="0">
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制;0是人为不能控件-->
<param NAME="EnableContextMenu" VALUE="-1">
<!--是否启用上下文菜单-->
<param NAME="url" value="music/06.偏爱.mp3">
<!--播放的文件地址-->
<param NAME="PlayCount" VALUE="1">
<!--播放次数控制,为整数-->
<param name="rate" value="1">
<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0">
<!--控件设置:当前位置-->
<param name="currentMarker" value="0">
<!--控件设置:当前标记-->
<param name="defaultFrame" value="">
<!--显示默认框架-->
<param name="invokeURLs" value="0">
<!--脚本命令设置:是否调用URL-->
<param name="baseURL" value="">
<!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0">
<!--是否按比例伸展-->
<param name="volume" value="50">
<!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0">
<!--是否静音-->
<param name="uiMode" value="Full">
<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param name="windowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="0">
<!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="-1">
<!--是否启用错误提示报告-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>
<br />
<a href="#" id="upAId">on</a>
<a href="#" onclick="javascript:Last_OneOK();">last</a>
<a href="#" id="nextAId"">next</a>

<br />
</body>
</html>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (3000人查看-2条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------