<!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>Untitled Page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
#div1 {
position:absolute;
z-index:1;
background-color:#d2e8ff;
visibility:hidden;
}
#test
{
height:30px; line-height:30px;
}
</style>
<script type="text/javascript">
var nPageWidth,nPageHeight,nLeftWidth,nRightWidth;
var nVideoCount;
var pname,pauthor,pcopyright,pinfo;
var p;
var bLoop = false;
var nMute = true;
function $(id){
return document.getElementById(id);
}
window.onload = function(){
show();
getUrl();
MainPageLoad();
}
//window.onresize= PageResize;
function getUrl(){
var url = location.search;
url = url.substring(5,url.length);
var re;
re = /=/g;
url = url.replace(re,"'");
//var url = "{cname:=TTC=,cauthor:=t1_author=,ccopyright:=t1_copy=,cinfo:=地点:(无)=,cssrc:=1715026167=,server:=192.168.0.119=,port:=101=}"
c = eval("(" + url+ ")");
$("pname").innerText= c.cname;
$("pauthor").innerText= c.cauthor;
$("pcopyright").innerText= c.ccopyright;
$("pinfo").innerText= c.cinfo;
}
function OpenObj1(){
// Open(ssrc1, ssrc2)
var strRet1 = $("Object1").Open(c.cssrc, 0);
// InsertUDP(ip, ssrc)
$("Object1").InsertUDP(c.server,c.cssrc);
$("Object1").Run();
}
function OpenObj2(){
var strRet2 = $("Object2").Open(parseInt(c.cssrc) + 1, 0);
$("Object2").InsertUDP(c.server,parseInt(c.cssrc) + 1);
$("Object2").Run();
}
function MainPageLoad(){
//first
OpenObj1();
OpenObj2();
//num
nVideoCount = 2;
nLeftWidth = $("left").clientWidth; // 700 总的宽度左边 width + padding
nRightWidth = $("right").clientWidth; // 300 总的宽度右边
Init();
}
function Init(){
OnTimeOut();
InitVolume();//拖动 播放 声音滚动条
}
function OnTimeOut(){
$("spTimeLabel").innerText =(new Date()).toLocaleTimeString();
setTimeout("OnTimeOut()",1000);
}
function Play(){
//g_pause = false;
//g_stop = false;
//alert($("Object1").Pause());
//alert($("Object1").Run());
var flag = $("Object1").GetPosition();
if(flag == 0) //从新开始
{
OpenObj1();
OpenObj2();
}
else
{
$("Object1").Run();
if (nVideoCount >= 1){
$("Object2").Run();
}
}
// if (nVideoCount == 2){
// document.Video2.Controls.play();
// }
}
function pause(){
$("Object1").Pause();
if (nVideoCount >= 1){
$("Object2").Pause();
}
}
function Stop(){
$("Object1").Stop();
$("Object1").Close();
if (nVideoCount >= 1){
$("Object2").Stop();
$("Object1").Close();
}
}
function SetFull(){
$("Object1").SetFullScreen();
}
function ConvertToTime(nTime)
{
var nHour = Math.round((nTime - 1800) / 3600);
var nMin = Math.round(((nTime % 3600) - 30)/ 60);
var nSec = Math.round((nTime % 3600) % 60);
var strsHour = ConvertToString(nHour);
var strMin = ConvertToString(nMin);
var strSec = ConvertToString(nSec);
return strsHour + ":" + strMin + ":" + strSec;
}
function ConvertToString(nValue)
{
var strReturn;
if (nValue < 10)
strReturn = "0" + nValue;
else
strReturn = nValue;
return strReturn;
}
function SetLoop(obj){
bLoop = !bLoop;
if (bLoop)
obj.src = "Images/loop_yes_hot.gif";
else
obj.src = "Images/loop_no_hot.gif";
}
function Mute(){
//alert($("Object1").GetVolume());
nMute = !nMute;
if(nMute)
{
$("Object1").SetVolume(5000);
$("spMute").innerHTML ="<img src='Images/volume_mute_false.gif' style=\"cursor:hand\" id=\"imgVolumeMute\">";
}
else
{
$("Object1").SetVolume(0);
$("spMute").innerHTML ="<img src='Images/volume_mute_true.gif' style=\"cursor:hand\" id=\"imgVolumeMute\">";
}
}
function GoVolume(){
if (nMute)
{
var nLeftPix = event.x;
//alert(event.x); 371
//alert(event.offsetX); 8
$("spVolumeCur").style.width = nLeftPix;
var nVolume = parseInt(nLeftPix * 100);
$("Object1").SetVolume(nVolume);
if (nVideoCount >= 1){
$("Object2").SetVolume(nVolume);
}
$("spVolumeBtn").style.left = parseInt($("spVolumeCur").style.pixelWidth);
}
}
function SlideVolume(obj){
if (nMute)
{
var nMin = 0;
var nMax = parseInt($("spVolumeSlider").offsetLeft) + 100;
if (event.button == 1){
obj.setCapture();
var nOffX = event.x;
//alert(nOffX);
if (nOffX >= $("spVolumeSlider").offsetLeft && nOffX <= nMax)
{
obj.style.pixelLeft = nOffX;
var nLeftPix = nOffX - nMin;
//if (nLeftPix > 100 || nLeftPix < parseInt($("spVolumeSlider").offsetLeft))
// nLeftPix = 0;
var nVolume = parseInt(nLeftPix * 100);
$("spVolumeCur").style.width = nLeftPix;
$("Object1").SetVolume(nVolume);
if (nVideoCount >= 1){
$("Object2").SetVolume(nVolume);
}
}
}
}
}
function SlideVolumeOver(obj){
obj.releaseCapture();
obj=false;
}
function InitVolume()
{
//$("Object1").SetVolume(5000);
var nCurVolume = $("Object1").GetVolume();
$("spVolumeCur").style.width = Math.round(nCurVolume) / 100 ;
$("spVolumeBtn").style.left = parseInt($("spVolumeCur").style.pixelWidth);
$("spVolumeBtn").style.top = $("spVolumeSlider").offsetTop - 15;
}
function show(){
//得到图层div1对应的id
var div1 = document.getElementById("div1");
//下面一句中getTop(div1.parentNode)得到id=div1到a的距离，a到body的距离，body到html的距离，距离之和
//下面div1.parentNode.clientHeight 表示div1本身的绝对高度
//div1.style.top = getTop(div1.parentNode) + div1.parentNode.clientHeight + "px";
//1.不设置top left 设置marginTop，marginLeft原来位置为原点偏移,不是以body为原点或是以上一个position为原点
div1.style.marginTop = "80px";
div1.style.marginLeft = "350px";
//2.设置top left 上一层要设置一个position 不然会随着页面变化(应为是不设置的话默认是body)
//div1.style.left = "500px";
//div1.style.top = "180px";
//对于div1的左边而言，就没有div1.parentNode.clientHeight这个内容了
//div1.style.left = getLeft(div1.parentNode);
//让div1图层显示
div1.style.visibility = 'visible';
div1.innerHTML = "<object id=\"Object2\" class=\"obj2\" classid=\"clsid:A58688A5-3C99-4B22-B29C-53545CEE03D2\" ></object>";
}
//得到某个图层最左边的所有距离之和,注意这里递归调用 getLeft(obj)
function getLeft(obj) {
var thisValue = 0;
if (obj) {
thisValue = obj.offsetLeft + getLeft(obj.offsetParent);
}
return thisValue;
}
//得到某个图层最上边的所有距离之和,注意这里递归调用getTop(obj)
function getTop(obj) {
var thisValue = 0;
if (obj) {
thisValue = obj.offsetTop + getTop(obj.offsetParent);
}
return thisValue;
}
</script>
</head>
<body>
<form name="formtest" action="#">
<div class="main">
<div id="div1">
</div>
<div class="left" id="left">
<div class="top">
<div class="title_left1">
</div>
<div class="title_bg1">
</div>
<div class="title_right1">
</div>
</div>
<div class="middle">
<object id="Object1" class="obj1" classid="clsid:A58688A5-3C99-4B22-B29C-53545CEE03D2" VIEWASTEXT></object>
</div>
<div class="bottom">
<span id="spScreenControl">
<!-- <div id="divTimeTool">
<span id="spTimeLeft"><img src="Images/time_left.gif"></span>
<span id="spTimeSlider" onclick="GoPosition()"><img src="Images/time_bg.gif"></span>
<span id="spTimeRight"><img src="Images/time_right.gif"></span>
<span id="spTimePass" onclick="GoPosition()"><img src="Images/time_pass_bg.gif"></span>
<span id="spTimeBtn" onmousedown="DragTimeSlider(this);"><img src="Images/time_btn.gif"></span>
</div>-->
<div id="divControl">
<span class="spControl">
<img src="Images/play_nor.gif" onclick="Play()" style="cursor: hand" id="imgPlay"></span>
<span class="spControl">
<img src="Images/pause_nor.gif" onclick="Pause()" style="cursor: hand" id="imgPause"></span>
<span class="spControl">
<img src="Images/stop_nor.gif" onclick="Stop()" style="cursor: hand" id="imgStop"></span>
<span class="spControl">
<img src="Images/full_nor.gif" onclick="SetFull()" style="cursor: hand"></span>
<span class="spControl">
<img src="Images/loop_no_nor.gif" id="imgLoop" style="cursor: hand" onclick="SetLoop(this)"></span>
</div>
<div id="spTimeLabel">
</div>
<div id="divVolume">
<span id="spMute" onclick="Mute()">
<img src="Images/volume_mute_false.gif" id="imgVolumeMute" style="cursor: hand"></span>
<span id="spVolumeSlider" onclick="GoVolume()"><span id="spVolumeCur" style="left: 0px;
top: 0px"></span></span><span id="spVolumeBtn" style="cursor: hand" onmousemove="SlideVolume(this)"
onmouseup="SlideVolumeOver(this)">
<img src="Images/volume_btn.gif" style="cursor: hand"></span>
</div>
</span>
</div>
</div>
<div class="right" id="right">
<div class="title">
<div class="title_left">
</div>
<div class="title_bg">
</div>
<div class="title_right">
</div>
</div>
<div class="other">
<div class="title_name">
文件名:</div>
<div class="pname" id="pname">
</div>
<div class="title_name">
作者:</div>
<div class="pauthor" id="pauthor">
</div>
<div class="title_name">
版权:</div>
<div class="pcopyright" id="pcopyright">
</div>
<div class="title_name">
详细信息:</div>
<div class="pinfo" id="pinfo">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
