javascript 播放器效果

最新推荐文章于 2024-04-05 09:47:40 发布
最新推荐文章于 2024-04-05 09:47:40 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Javascript类 DHTML类 文章标签： javascript function xhtml html filter border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdefu/article/details/4026090
版权

首页页面

 

<!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>
    <title>无标题页</title>

    <script language="javascript" type="text/javascript">
    function PopuWinMp3(VideoPath)
    {
 window.open("PlayMp3.htm#" + VideoPath,"_blank","height=300,width=400,top="+screen.width/3+",left="+screen.height/3+",toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
    }
    </script>

</head>
<body>
    <a href="javascript:void(0);" οnclick="PopuWinMp3('http://www.bjxxd.com/video/lqxactivity.wmv');">
 龙庆峡、松山之旅</a>
</body>
</html>

 

弹出页面

 

<!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>
    <title>轻松一刻_新现代教育网</title>
    <style>
body {
        overflow:auto;
        font-size:12px;
        cursor:default;
  background-color:#E6F4FA;
}
#table01 {
        padding-top:120px;
        font-size:12px;
        background:#C1D1F0 url(images/pl_bg.jpg) repeat-x;
        color:white;
        text-align:center;
}
#playListTitle {
        background-Color:#82ADFF;
        color:white;
        font-size:12px;
        font-weight:bold;
        width:100%;
        height:16px;
        padding:2px;
}
#playList {
        width:150px;
        height:286px;
        margin:0px;
        font-size:12px;
        background-Color:#82ADFF;
        color:white;
}
#musicList {
        width:200px;
        border:solid 4px #C1D1F0;
        height:303px;
        position:absolute;
        right:14px;
        top:21px;
  font-size:12px;
}
#musicListTitle {
        font-size:13px;
        width:100%;
        height:20px;
        background-Color:#C5FFC5;
        padding:3px;
        font-weight:bold;
}
#musicList a {
        text-decoration:none;
        width:100%;
        height:20px;
        line-height:20px;
        font-size:12px;
        line-height:20px;
        padding-top:5px;
        padding-left:10px;
}
#musicList a:hover {
        background-Color:#E5FFE5;
}
</style>

    <script language="javascript" type="text/javascript">
 var $=function(objid){
     return document.getElementById(objid);
 }

 function Mp3PlayStop()
 {
     if($("hidisplay").value == "1")
     {
  $("MediaPlayer1").stop();
  $("hidisplay").value = "0";
     }
     else
     {
  $("MediaPlayer1").play();  
  $("hidisplay").value = "1";
     }
 }
    </script>

</head>
<body οnlοad="init();">
    <form id="form1" runat="server">
 <input type="hidden" id="hidisplay" value="1" /><a href="javascript:void(0);" οnclick="Mp3PlayStop();">播放</a>
 <table id="table01" style="margin-top: 20px; margin-left: 15px;">
     <tr>
  <td>
      <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="320"
   height="306" standby="Loading Windows Media Player components..." type="application/x-oleobject"
   volume="100" loop="true" showstatusbar="1" style="filter: Alpha(opacity=10,finishOpacity=100,style=3)">
   <param name="AudioStream" value="-1">
   <param name="AutoSize" value="-1">
   <!--是否自动调整播放大小-->
   <param name="AutoStart" value="1">
   <!--是否自动播放-->
   <param name="AnimationAtStart" value="-1">
   <param name="AllowScan" value="-1">
   <param name="AllowChangeDisplaySize" value="-1">
   <param name="AutoRewind" value="0">
   <param name="Balance" value="0">
   <!--左右声道平衡,最左-9640,最右9640-->
   <param name="BaseURL" value="">
   <param name="BufferingTime" value="15">
   <!--缓冲时间-->
   <param name="CaptioningID" value="">
   <param name="ClickToPlay" value="-1">
   <param name="CursorType" value="0">
   <param name="CurrentPosition" value="0">
   <param name="Appearance" value="0">
   <!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
   <param name="CurrentMarker" value="0">
   <param name="DefaultFrame" value="">
   <param name="DisplayBackColor" value="0">
   <param name="DisplayForeColor" value="16777215">
   <param name="DisplayMode" value="0">
   <param name="DisplaySize" value="0">
   <!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->
   <param name="Enabled" value="-1">
   <param name="EnableContextMenu" value="-1">
   <!--是否用右键弹出菜单控制-->
   <param name="EnablePositionControls" value="-1">
   <param name="EnableFullScreenControls" value="-1">
   <param name="EnableTracker" value="-1">
   <!--是否允许拉动播放进度条到任意地方播放-->
   <param name="Filename" value="" valuetype="ref">
   <param name="InvokeURLs" value="-1">
   <param name="Language" value="-1">
   <param name="Mute" value="0">
   <!--是否静音-->
   <param name="PlayCount" value="1">
   <!--重复播放次数,0为始终重复-->
   <param name="PreviewMode" value="-1">
   <param name="Rate" value="1">
   <!--播放速度1.0-2.0倍的速度播放-->
   <param name="SAMILang" value="">
   <param name="SAMIStyle" value="">
   <param name="SAMIFileName" value="">
   <!--选择同时播放(伴音)的歌曲-->
   <param name="SelectionStart" value="-1">
   <param name="SelectionEnd" value="-1">
   <param name="SendOpenStateChangeEvents" value="-1">
   <param name="SendWarningEvents" value="-1">
   <param name="SendErrorEvents" value="-1">
   <param name="SendKeyboardEvents" value="0">
   <param name="SendMouseClickEvents" value="0">
   <param name="SendMouseMoveEvents" value="0">
   <param name="SendPlayStateChangeEvents" value="-1">
   <param name="ShowCaptioning" value="0">
   <!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示-->
   <param name="ShowControls" value="-1">
   <!--是否显示控制,比如播放,停止,暂停-->
   <param name="ShowAudioControls" value="-1">
   <!--是否显示音量控制-->
   <param name="ShowDisplay" value="0">
   <!--显示节目信息,比如版权等-->
   <param name="ShowGotoBar" value="0">
   <!--一条框,在下面,有往下箭头-->
   <param name="ShowPositionControls" value="-1">
   <!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制-->
   <param name="ShowStatusBar" value="-1">
   <!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间-->
   <param name="ShowTracker" value="-1">
   <!--是否显示当前播放跟踪条,即当前的播放进度条-->
   <param name="TransparentAtStart" value="-1">
   <param name="VideoBorderWidth" value="0">
   <!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小-->
   <param name="VideoBorderColor" value="0">
   <!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
   <param name="VideoBorder3D" value="0">
   <param name="Volume" value="0">
   <!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640,最大0-->
   <param name="WindowlessVideo" value="0">
   <!--如果是0可以允许全屏,否则只能在窗口中查看-->
      </object>
  </td>
  <td>
      &nbsp;
  </td>
     </tr>
 </table>

 <script language="javascript" type="text/javascript">
 var Mp3Path = window.location.hash;
        $("MediaPlayer1").fileName=Mp3Path.substring(1);
        $("MediaPlayer1").play();
 </script>

    </form>
</body>
</html>

 

 

<script language="JavaScript">

var state;

 

//初始化

function playerinit()

{

player.url="mp3.m3u";

player.settings.autoStart = false ;

}

 

//播放

function play()

{

if (player.controls.isavailable('play'))

{

player.controls.play();

state=setInterval("updatetime()",1000);

playerinfo.innerHTML = "播放";

}

}

 

//暂停

function pause()

{

if (player.controls.isavailable('pause'))

{

player.controls.pause();

clearInterval(state);

playerinfo.innerHTML = "暂停";

}

}

 

//停止

function stop()

{

if (player.controls.isavailable('stop'))

{

player.controls.stop();

clearInterval(state);

playerinfo.innerHTML = "停止";

}

}

 

//前首

function previous()

{

if (player.controls.isavailable( 'previous' ))

{

player.controls.previous();

playerinfo.innerHTML = "前一首";

}

}

 

//后首

function next()

{

if (player.controls.isavailable( 'next' ))

{

player.controls.next();

playerinfo.innerHTML = "下一首";

}

}

 

//？

function step()

{

if (player.controls.isavailable( 'step' ))

player.controls.step( 1 );

}

 

//音量-

function voldown()

{

if ( player.settings.volume < 5 )

{

player.settings.volume = 0;

playerinfo.innerHTML = "0";

}

else

{

player.settings.volume -= 5;

playerinfo.innerHTML = player.settings.volume;

}

}

 

//音量+

function volup()

{

if ( player.settings.volume > 95 )

{

player.settings.volume = 100;

playerinfo.innerHTML = "100";

}

else

{

player.settings.volume += 5;

playerinfo.innerHTML = player.settings.volume;

}

}

 

//静音

function mute()

{

player.settings.mute = !player.settings.mute;

}

 

//声道

function balance()

{

switch (player.settings.balance)

{

case 0:

   player.settings.balance = 100;

   playerinfo.innerHTML = '左声道';

   break;

case 100:

   player.settings.balance = -100;

   playerinfo.innerHTML = '右声道';

   break;

case -100:

   player.settings.balance = 0;

   playerinfo.innerHTML = '全声道';

   break;

default :

   player.settings.balance = 0;

   playerinfo.innerHTML = '全声道';

   break;

}

}

 

//更新时间

function updatetime()

{

playerinfo.innerHTML = player.controls.currentPositionString + " | " + player.currentMedia.durationString;

}

 

</script>

 

 

 

 

 

快乐无边
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 调用window media player 播放视频
yjian84的博客
08-16 861
今天写了一个js函数，还有bug 没调好，当嵌入到ifream中时，视频播放器会自动缩小，不知道为什么，研究了半天没弄明白，希望有了解的朋友，给个提示。 var _test = function(options) { this.version = "v0.1"; this.option = {}; this.flag = false; this.init(option...
Javascript Windows MediaPlayer完整示范版
jiangtongcn的专栏
04-14 1663
一、主页面(采用jsp实现)<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> Insert title here <!-- //保存当前播放曲目在列表中的索引 var index = 0;
javascript 控制 操作 object标签 player.GetLength()
yuchen8的专栏
09-02 4091
Windows Media Playerhtml：                           //媒体文件地址                    //声道0全声道,-100左声道,100右声道                //播放次数                //是否自动播放-1是,0否                  //音量);            
几种js调WindowsMedia.player.docx
08-19
js调用Windows Media Player的播放器代码，通过js在web中添加Windows Media Player
QPlayer左下角悬浮多功能mp3音乐播放器插件
08-22
var playlist = [ {title:"木小雅",artist:"可能否", mp3:"Player/木小雅+-+可能否.mp3", cover:"http://p4.music.126.net/7VJn16zrictuj5kdfW1qHA==/3264450024433083.jpg?param=106x106",}, {title:"王贰浪",artist:"往后余生", mp3:"Player/往后余生-王贰浪.mp3", cover:"http://p4.music.126.net/KLw_TLTRUe9pClPv4vlEtQ==/936783906865219.jpg?p
JavaScript CSS jQuery 网页音乐播放器
05-27
JavaScript、CSS和jQuery是网页开发中的三大核心技术，它们在创建交互式和动态的网页音乐播放器中发挥着关键作用。本项目"JavaScript CSS jQuery 网页音乐播放器"旨在教你如何利用这些技术构建一个功能丰富的音乐...
javascript音乐播放器（可二次开发）
06-07
通过CSS样式和JavaScript，我们可以实现这些元素的动态显示和交互效果。例如，使用JavaScript动态修改元素的CSS属性来改变进度条的长度，或者在播放/暂停按钮上应用不同的图标。 4. 音乐库管理 如果播放器需要支持...
媒体播放器效果 javascript代码
07-27
媒体播放器效果 javascript代码
Javascript调用本地播放器(potplayer)播放原画视频和音乐.zip
03-07
JavaScript是一种广泛用于网页动态效果和用户交互的编程语言，它通常受限于浏览器的安全策略，无法直接操作本地文件系统。然而，通过一些技术手段，如ActiveX或NW.js（Node.js的桌面应用框架），JavaScript可以与...
javascript 播放器
04-24
这是个用javascript代码开发的一个网页浏览器 读者在编写 自己的网页时候可以把这个加进去 效果很好
web 中调用window media player 的几种方式
01-21
几种调用window media player方式.显示不一样。
android shader线性渲染（类似与歌词逐字同步）
05-08
用android shader线性渲染实现类似与歌词逐字变色同步的效果
推荐项目：QPlayer - Typecho 插件
最新发布
gitblog_00098的博客
04-05 406
推荐项目：QPlayer - Typecho 插件 项目地址:https://gitcode.com/Jrohy/QPlayer-Typecho-Plugin 项目简介 QPlayer 是一款专为 Typecho 博客系统设计的音乐播放器插件。它将音频文件集成到你的博客中，为访客提供优雅且功能强大的音乐播放体验。凭借其简洁的设计和丰富的自定义选项，QPlayer 可以无缝融入任何Typecho主题...
分享88个JS播放器脚本，总有一款适合您
zy0412326的专栏
02-07 3715
js
js 调用windows media player 播放器
xiaowutcp的专栏
08-30 4271
根据不同浏览器windows  media player 的加载方式不同，下面是常见的集中用法，         本来刚开始用flex 写的一个播放器，后来发现不支持wav 格式的，如果自己对这些流进行解析的话，相对来说工作量会很庞大，也很麻烦   最后的解决办法是在网页中嵌入windows 自带的播放器，windows media player              fu
原生js打造自定义播放器
冰雪为融的博客
04-12 2450
用到的技术，主要是video的相关知识：实现的功能是去掉自带的控制条，按自己想要的形式设置视频的控制条：有播放与暂停（play()方法和pause()方法）、拖拽控制条控制视频的播放进度，并且控制条随着视频的播放进度自动前进或后退，还有视频播放的当前时间和视频的总时间，以及音量大小的控制，和是否全屏播放按钮，这里的全屏播放，只用了一条语句oV.mozRequestFullScreen();//按E...
js实现音乐播放器效果
07-14
要实现一个音乐播放器效果，你可以使用JavaScript来控制音频的播放和暂停。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>音乐播放器</title> </head> <body> <audio id="myAudio" src="music.mp3"></audio> <button onclick="play()">播放</button> <button onclick="pause()">暂停</button> <script> var audio = document.getElementById("myAudio"); function play() { audio.play(); } function pause() { audio.pause(); } </script> </body> </html> ``` 在上面的代码中，我们使用`<audio>`标签来嵌入音频文件，并给它一个`id`属性。然后，我们通过JavaScript的`getElementById`方法获取到这个`<audio>`元素，并把它赋值给一个变量`audio`。 接着，我们定义了两个函数`play`和`pause`，分别用于播放和暂停音频。在这些函数中，我们使用`play`方法和`pause`方法来控制音频的播放和暂停。 最后，我们在页面中添加了两个按钮，分别调用`play`和`pause`函数，实现了音乐播放器的基本功能。 你可以替换`src`属性的值为你需要播放的音频文件的路径，并根据自己的需求进行样式和功能的扩展。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值