[转]用JavaScript js 控制 Media Player 播放器

于 2012-06-04 17:06:12 发布
阅读量260 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AlanLiu1988/article/details/84228470
版权
本文介绍如何创建自定义播放器，并深入探讨音视频处理技术，包括编码、解码、直播流媒体和AI应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

转自：http://blog.youkuaiyun.com/IBM_hoojo/article/details/5754834

 

目前没有自定义进度条拖拽功能，准备参照着写一个。预计一周内搞定


  1. 如果你的电脑上面找不到播放的音影文件，可以用一张图片代替；  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5.         <title>控制你的播放器</title>  
  6.         <script language="javascript" src="player.js"></script>  
  7.         <script language="JavaScript" for=WindowsMediaPlayer event=playstatechange(newstate)>   
  8.             switch(newstate) {   
  9.                 case 1:   
  10.                     playerinfo.innerHTML = "停止";  
  11.                     break;  
  12.                 case 2:  
  13.                     playerinfo.innerHTML = "暂停";  
  14.                     break;   
  15.                 case 3:   
  16.                     playerinfo.innerHTML = "正在播放";   
  17.                     break;   
  18.                 case 4:   
  19.                     playerinfo.innerHTML = "4";   
  20.                     break;   
  21.                 case 5:   
  22.                     playerinfo.innerHTML = "5";   
  23.                     break;   
  24.                 case 6:   
  25.                     playerinfo.innerHTML = "正在缓冲...";   
  26.                     break;   
  27.                 case 7:   
  28.                     playerinfo.innerHTML = "7";   
  29.                     break;   
  30.                 case 8:   
  31.                     playerinfo.innerHTML = "8";   
  32.                     break;   
  33.                 case 9:   
  34.                     playerinfo.innerHTML = "正在连接...";   
  35.                     break;   
  36.                 case 10:   
  37.                     playerinfo.innerHTML = "准备就绪";   
  38.                     break;   
  39.                 case 11:   
  40.                     playerinfo.innerHTML = "11";   
  41.                     break;   
  42.                 default:   
  43.                     playerinfo.innerHTML = "";   
  44.             }   
  45.         </script>  
  46.     </head>  
  47.   
  48.     <body>  
  49.         <table width="100%" border="0" cellpadding="0" cellspacing="0" id="table1">  
  50.             <tr>  
  51.                 <td colspan="2" align="center">  
  52.                     <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer" width="400" height="300">  
  53.                         <param name="URL" value="">  
  54.                         <param name="rate" value="1">  
  55.                         <param name="balance" value="0">  
  56.                         <param name="currentPosition" value="0">  
  57.                         <param name="defaultFrame" value="">  
  58.                         <param name="playCount" value="">  
  59.                         <param name="autoStart" value="0">  
  60.                         <param name="currentMarker" value="0">  
  61.                         <param name="invokeURLs" value="0">  
  62.                         <param name="baseURL" value="">  
  63.                         <param name="volume" value="100">  
  64.                         <param name="mute" value="-1">  
  65.                         <param name="uiMode" value="none">  
  66.                         <param name="stretchToFit" value="0">  
  67.                         <param name="windowlessVideo" value="0">  
  68.                         <param name="enabled" value="-1">  
  69.                         <param name="enableContextMenu" value="-1">  
  70.                         <param name="fullScreen" value="false">  
  71.                         <param name="SAMIStyle" value="">  
  72.                         <param name="SAMILang" value="">  
  73.                         <param name="SAMIFilename" value="">  
  74.                         <param name="captioningID" value="">  
  75.                         <param name="enableErrorDialogs" value="0">  
  76.                     </object>  
  77.                 </td>  
  78.             </tr>  
  79.             <tr>  
  80.                 <td height="20" colspan="2" align="center">  
  81.                     <font color=red><span id="playerinfo3"></span></font>  
  82.                 </td>  
  83.             </tr>  
  84.             <tr>  
  85.                 <td width="60%" height="20">  
  86.                     <input type="file" id="FileBtn" style="visibility: hidden">  
  87.                     <span id="playerinfo1"></span>  
  88.                     <font color="blue"><span id="playerinfo2"></span></font>  
  89.                 </td>  
  90.                 <td width="40%" height="20">  
  91.                     <span id="playerinfo"></span>  
  92.                 </td>  
  93.             </tr>  
  94.             <tr>  
  95.                 <td colspan="2" align="center">  
  96.                     <input type="button" name="openfile" title="打开文件 "  
  97.                         onclick="openfile()" value="打开文件 ">  
  98.                     <input type="button" name="play" title="播放" onclick="play();"  
  99.                         value="播放 ">  
  100.                     <input type="button" name="pause" title="暂停" onclick="pause();"  
  101.                         value="暂停">  
  102.                     <input type="button" name="stop" title="停止" onclick="stop();"  
  103.                         value="停止 ">  
  104.                     <input type="button" name="voldown" title="音量-"  
  105.                         onclick="voldown();" value="音量-">  
  106.                     <input type="button" name="volup" title="音量+"  
  107.                         onclick="volup();" value="音量+">  
  108.                     <input type="button" name="mute" title="静音/" onclick="mute();"  
  109.                         value="静音/">  
  110.                     <input type="button" name="balance" title="声道"  
  111.                         onclick="balance();" value="声道">  
  112.                     <input type="button" title="刷新" onclick="location.reload();"  
  113.                         value="刷新">  
  114.                     <input type="button" title="全屏" value="全屏"  
  115.                         onclick="fullScreen();">  
  116.                 </td>  
  117.             </tr>  
  118.         </table>  
  119.     </body>  
  120. </html>  

 

player.js

 

  1. var state;  
  2. var varb;  
  3. var varfullscreen = 0;  
  4. function loop() {  
  5.     WindowsMediaPlayer.playCount = 2;  
  6. }  
  7. function openfile() {  
  8.     var fstr = "";  
  9.     FileBtn.click();  
  10.     if (FileBtn.value == "") {  
  11.         return;  
  12.     }  
  13.     WindowsMediaPlayer.URL = FileBtn.value;  
  14.     playerinfo1.innerHTML = "全声道";  
  15.     playerinfo3.innerHTML = " <b><font color=green>当前播放文件的路径和名称是:</font></b>" + FileBtn.value;  
  16. }  
  17. function playerinit() {  
  18.     WindowsMediaPlayer.url = "test.wmv"; //定义你自己的文件   
  19.     WindowsMediaPlayer.settings.autoStart = false;  
  20. }  
  21. function play() {   
  22. //if(WindowsMediaPlayer.URL= '')alert('请打开文件');return;   οnlοad= "playerinit()"   
  23.     if (WindowsMediaPlayer.controls.isavailable("play")) {  
  24.         WindowsMediaPlayer.controls.play();  
  25.         state = setInterval("updatetime()", 1000);  
  26.         playerinfo.innerHTML = "播放";  
  27.         varfullscreen = 1;  
  28.         playerinfo2.innerHTML = "音量:" + WindowsMediaPlayer.settings.volume;  
  29.     }  
  30. }  
  31. function voldown() {  
  32.     if (WindowsMediaPlayer.settings.volume < 5) {  
  33.         WindowsMediaPlayer.settings.volume = 0;  
  34.         playerinfo2.innerHTML = "音量:0";  
  35.         playerinfo1.innerHTML = "0音量";  
  36.     } else {  
  37.         WindowsMediaPlayer.settings.volume -= 5;  
  38.         playerinfo2.innerHTML = "音量:" + WindowsMediaPlayer.settings.volume;  
  39.         playerinfo1.innerHTML = "非静音";  
  40.     }  
  41. }  
  42. function volup() {  
  43.     if (WindowsMediaPlayer.settings.volume > 95) {  
  44.         WindowsMediaPlayer.settings.volume = 100;  
  45.         playerinfo2.innerHTML = "音量:100";  
  46.         playerinfo1.innerHTML = "最大音";  
  47.     } else {  
  48.         WindowsMediaPlayer.settings.volume += 5;  
  49.         playerinfo2.innerHTML = "音量:" + WindowsMediaPlayer.settings.volume;  
  50.         playerinfo1.innerHTML = "非静音";  
  51.     }  
  52. }  
  53. function pause() {  
  54.     if (WindowsMediaPlayer.controls.isavailable("pause")) {  
  55.         WindowsMediaPlayer.controls.pause();  
  56.         clearInterval(state);  
  57.         playerinfo.innerHTML = "暂停";  
  58.         varfullscreen = 1;  
  59.     }  
  60. }  
  61. function stop() {  
  62.     if (WindowsMediaPlayer.controls.isavailable("stop")) {  
  63.         WindowsMediaPlayer.controls.stop();  
  64.         clearInterval(state);  
  65.         playerinfo.innerHTML = "停止";  
  66.         varfullscreen = 0;  
  67.     }  
  68. }  
  69. function mute() {  
  70.     WindowsMediaPlayer.settings.mute = !WindowsMediaPlayer.settings.mute;  
  71.     if (varb != 1) {  
  72.         playerinfo1.innerHTML = "静音中";  
  73.         document.all.volup.disabled = true;  
  74.         document.all.voldown.disabled = true;  
  75.         document.all.balance.disabled = true;  
  76.         varb = 1;  
  77.     } else {  
  78.         playerinfo1.innerHTML = "非静音";  
  79.         document.all.volup.disabled = false;  
  80.         document.all.voldown.disabled = false;  
  81.         document.all.balance.disabled = false;  
  82.         varb = 0;  
  83.     }  
  84. }  
  85. function balance() {  
  86.     switch (WindowsMediaPlayer.settings.balance) {  
  87.       case 0:  
  88.         WindowsMediaPlayer.settings.balance = 100;  
  89.         playerinfo1.innerHTML = "左声道";  
  90.         break;  
  91.       case 100:  
  92.         WindowsMediaPlayer.settings.balance = -100;  
  93.         playerinfo1.innerHTML = "右声道";  
  94.         break;  
  95.       case -100:  
  96.         WindowsMediaPlayer.settings.balance = 0;  
  97.         playerinfo1.innerHTML = "全声道";  
  98.         break;  
  99.       default:  
  100.         WindowsMediaPlayer.settings.balance = 0;  
  101.         playerinfo1.innerHTML = "全声道";  
  102.         break;  
  103.     }  
  104. }  
  105. function fullScreen() {  
  106.     if (varfullscreen) {  
  107.         WindowsMediaPlayer.fullScreen = true;  
  108.     } else {  
  109.         WindowsMediaPlayer.fullScreen = false;  
  110.     }  
  111.     //WindowsMediaPlayer.uiMode = "Invisible";//Full, Mini, None, Invisible设置外观  
  112. }  
  113. function updatetime() {  
  114.     if (WindowsMediaPlayer.controls.currentPositionString == "") {  
  115.         playerinfo.innerHTML = "00:00" + "/" + WindowsMediaPlayer.currentMedia.durationString;  
  116.         varfullscreen = 0;  
  117.     } else {  
  118.         playerinfo.innerHTML = WindowsMediaPlayer.controls.currentPositionString + "/" + WindowsMediaPlayer.currentMedia.durationString;  
  119.     }  
  120. }  

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值