📄 15-4 可视化的播放进度与查看媒体信息.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>15-4 可视化的播放进度与查看媒体信息</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; }
table { border-collapse:collapse; }
td { border:1px solid #666; padding:5px 10px; }
#progress { height:7px; width:300px; overflow:hidden; border:1px solid #666; cursor:pointer; }
#progress div { height:7px; width:0px; overflow:hidden; background-color:#A0A0FF; border-right:1px solid black; }
</style>
<script>
//函数“$”根据指定字符串获取相应ID的对象
function $(str){ return(document.getElementById(str)); }
//窗体载入完毕时初始化
window.onload = function(){
init_progress();
show_position();
}
//初始化播放进度条
function init_progress(){
var obj = $("progress");
//建立进度条
obj.p = document.createElement("div");
obj.appendChild(obj.p);
//添加自定义方法
obj.set = function(percent){
percent = Number(percent);
if(isNaN(percent)||percent<0||percent>1)percent=0;
this.p.style.width = parseInt(percent * this.offsetWidth) + "px";
this.title = Number(percent*100).toFixed(2) + "%";
}
//绑定鼠标单击事件
//鼠标单击时自单击的位置开始播放
obj.onclick = function(){
var x, p;
x = event.clientX;
//计算鼠标单击位置代表的播放百分比例
p = (x - this.offsetLeft)/this.offsetWidth;
//设置进度显示
this.set(p);
//设置播放进度
$("hutia").controls.currentPosition = p * Number($("hutia").currentMedia.duration);
}
}
//显示媒体信息
function show_info(){
var med, tb, row, cell;
//获取“Media”对象
med = $("hutia").currentMedia;
//生成显示信息的表格
tb = document.createElement("table");
document.body.appendChild(tb);
//插入表头
row = tb.insertRow();
cell = row.insertCell(); cell.innerHTML = "属性名"; cell.style.fontWeight = "bold";
cell = row.insertCell(); cell.innerHTML = "属性值"; cell.style.fontWeight = "bold";
//循环访问各个属性
for(var i=0; i<med.attributeCount; i++){
row = tb.insertRow();
//插入属性名
cell = row.insertCell(); cell.innerHTML = med.getAttributeName(i);
//插入属性值
cell = row.insertCell(); cell.innerHTML = med.getItemInfo(med.getAttributeName(i));
}
}
//显示当前的播放进度
function show_position(){
$("progress").set(Number($("hutia").controls.currentPosition)/Number($("hutia").currentMedia.duration));
setTimeout(show_position, 50);
}
</script>
</head>
<body>
<!-- Windows Media Player 控件，设置其尺寸为0*0，因此其被隐藏 -->
<OBJECT ID="hutia" height="0" width="0"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="F:\back\music\here i am.mp3" />
<param name="AutoStart" value="False" />
</OBJECT>
<p style="float:left;">播放控制 - 当前进度：</p>
<!-- 进度条容器 -->
<div id="progress"></div>
<p>
<input type="button" value="播放" title="播放当前歌曲"
onclick="$('hutia').controls.play(); setTimeout(show_info, 1000);">
</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -