目录
1.html部分:play.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http: //www.w3.org/1999/xhtml"> <head>
<meta charset="UTF-8">
<title>play</title>
<link rel="stylesheet" href="../css/vodplay.css" />
</head>
<bodybgcolor="transparent"leftmargin="0"topmargin="0"marginwidth="0"marginheight="0"style="background-color:transparent;">
<div class="box">
<!--音量-->
<div class="voice" id="volumeDiv">
<div class="title3">
<span id="volumepercent">50%</span>
</div>
<!--进度条-->
<!--voiceBar1原生样式-->
<div class="voiceBar1">
<!--voiceBar2为进度条移动样式-->
<div class="voiceBar2" id="volumecolorbar"></div>
</div>
<!--喇叭-->
<div class="voicePic"></div>
</div>
<!--断点续播操作-->
<div class="playBack" id="progressdiv">
<div class="title2" id="question">
<span>按“返回”键可以从头看</span>
</div>
<div class="tishi" id="playingtimediv">
<span id="playingtime">20:35</span>
</div>
<!--暂停-->
<div class="playPic" id="playstatus"></div>
<!--播放 display: none;-->
<div class="suspended"></div>
<!--进度条-->
<!--progressBar1-->
<div class="progressBar1"></div>
<!--progressBar2为进度条移动样式-->
<div class="progressBar2" id="progressbar"></div>
<div class="playTime">
<span id="playtime">20:35/110:49</span>
</div>
<div class="tishi2">
<span id="playprogramname">正在播放:大话西游之爱你一万年</span>
</div>
</div>
<!--暂停时遮罩-->
<div class="zhezhao" id="pauseDiv">
<div class="mask"></div>
<div class="maskPic">
<img id="img" src="../images/Eimg/player_icon_pause1.png" />
</div>
</div>
<!--退出提示-->
<div class="exit">
<div class="mask"></div>
<div class="inform">
<div class="inforHeader">提示</div>
<div class="inforMain">
<div class="word">您确定要退出播放吗?</div>
<div class="advertising">
<!-- <img src="../images/Eimg/popup_p1.jpg"/> -->
<!-- <img src="../images/Eimg/popup_p1.jpg"/> -->
</div>
<div class="button">
<!--buttonSel为焦点样式-->
<div class="exitbutton determine buttonSel" id="sureBtn">取消</div>
<div class="exitbutton cancel">确定</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/util/config.js"></script>
<script src="../js/util/fun.js"></script>
<script src="../js/util/ajaxMy.js"></script>
<script src="../js/play/media.js"></script>
<script src="../js/play/keyPress.js"></script>
<script src="../js/play/master.js"></script>
<script src="../js/play/common.js"></script>
<script src="../js/play/back.js"></script>
<script src="../js/play/vodplay.js"></script>
</html>
<!-- 二、通过iframe框架调用代码 -->
<!-- <div style="position:absolute;left: 165px; top: 17px; width:320px;
height:206px;z-index:99;overflow:hidden;"> <iframe name="if_smallscreen"
id="if_smallscreen" width="320" height="206" src="hwvideo.php?width=320&height=206&left=165&top=17"
frameborder="no" scrolling="no"></iframe></div> -->
<!-- 三、需要注意的事项 (1)如果有背景图片,请保持视频播放区域的背景图片透明;
(2)层必须设定宽高,详见第二点代码;
(3)设置视频位置必须用到setVideoDisplayArea方法;
(4)<body>必须写为<bodybgcolor="transparent" leftmargin="0" topmargin="0" marginwidth="0"marginheight="0"
style="background-color: transparent;position:absolute;z-index:0;">,
至少保留background-color:transparent以及bgcolor="transparent";
(5)视频跨页播放的问题 -->
<!-- 页面已经跳转到另一个页面去了,而视频仍在播放,若是用iframe嵌套播放的话,
则在视频返回的js里加上代码:var if_smallscreen = document.getElementByIdx_x("if_smallscreen");
if_smallscreen.mp.stop(); 其中if_smallscreen为iframe的对象id若并未用iframe嵌套播放,则参见第一点代码 -->
2.引入的 vodplay.css
body{ line-height:28px; color:#fff;font-size:28px;font-family:"Microsoft YaHei";}
input,textarea,select{font-size:100%;font-family:inherit;outline:none;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{margin:0;}
h4,h5,h6{font-size:1em;}
img{border:0;}
ul,ol{padding:0; list-style-type:none;margin: 0;}
li{padding:0;}
.dn{display: none;}
.vh{visibility: hidden;}
.o0{opacity: 0;}
/*点播播放页*/
.box{
width: 1280px;
height: 720px;
}
.operation{
width: 1278px;
height: 180px;
position: absolute;
top: 537px;
left: 0px;
background: url(../images/Eimg/player_mengban.png) no-repeat;
visibility:hidden;
}
.operation .point{
position: absolute;
top: 3px;
width: 14px;
height: 14px;
background-color: #ffffff;
border-radius: 50%;
}
.operation .title1{
position: absolute;
top: -9px;
left:20px;
}
.operation .title1 span{
margin-left: 5px;
font-size: 17px;
color: #FFFFFF;
}
.operation .seriesNum{
position: absolute;
top: 35px;
left: 20px;
}
.operation .seriesNum .seriesList{
display: inline-block;
text-align: center;
line-height: 64px;
width: 64px;
height: 64px;
background-color:#38383C;
opacity: 0.5;
margin-left: 10px;
}
.operation .seriesNum .seriesList span{
font-size: 24px;
color: #FFFFFF;
}
.operation .seriesNum .seriesSel{
background-color: rgb(232,130,45);
opacity: 1;
}
.operation .sets{
position: absolute;
top:115px;
left: 5px;
}
.operation .sets span{
font-size: 24px;
display: inline-block;
text-align: center;
line-height: 40px;
width:126px;
height:40px;
margin-left: 25px;
background-color:#38383C;
opacity: 0.7;
}
.operation .setSel{
color: rgb(232,130,45);
opacity: 1;
}
/*音量*/
.voice{
position:absolute;
left: 1150px;
top: 70px;
visibility:hidden;
}
.voice .title3{
position: absolute;
top: 170px;
left: -42px;
}
.voice .title3 span{
color:rgb(232,130,45) ;
font-size: 14px;
}
.voice .voiceBar1{
position: relative;
width: 1px;
height: 400px;
background-color: #1A120E;
}
.voiceBar1 .voiceBar2{
position: absolute;
left: 0px;
bottom: 0;
width: 1px;
height: 200px;
background-color: rgb(232,130,45);
}
.voice .voicePic{
left: -8px;
width: 20px;
height: 20px;
position: absolute;
top: 420px;
background: url(../images/Eimg/player_icon_volume.png) no-repeat;
}
/*断点续播*/
.playBack{
background: url(../images/Eimg/player_mengban.png) no-repeat;
width: 1278px;
height: 180px;
position: absolute;
top:539px;
left: 0px;
visibility:hidden;
/*display: none;*/
}
.playBack .title2{
text-align: center;
line-height: 50px;
position: absolute;
top: 0;
left: 400px;
width: 422px;
height: 50px;
border: 2px solid rgb(232,130,45);
background-color:#1a120e;
border-radius: 25px;
opacity: 0.8;
visibility:hidden;
}
.playBack .title2 span{
font-size: 24px;
color: #AFAEAE;
}
.playBack .progressBar1{
position: relative;
top: 100px;
left: 100px;
height: 1px;
width:1000px;
background-color: #AFAEAE;
}
.playBack .progressBar2{
position: absolute;
top: 100px;
left: 100px;
height: 1px;
width:550px;
background-color:rgb(232,130,45);
}
.playBack .tishi{
text-align: center;
line-height: 24px;
width: 82px;
height: 24px;
border-radius: 15px;
position: absolute;
top: 60px;
left: 280px;
background-color:rgb(232,130,45);
padding-bottom: 7px;
}
.playBack .playPic{
width: 20px;
height: 26px;
position: absolute;
top: 88px;
left: 50px;
background: url(../images/Eimg/player_icon_playing.png) no-repeat;
}
.playBack .suspended{
width: 20px;
height: 26px;
position: absolute;
top: 88px;
left: 50px;
background: url(../images/Eimg/player_icon_pause.png) no-repeat;
display: none;
}
.playBack .tishi span,.tishi2 span{
font-size: 18px;
}
.playBack .playTime{
position: absolute;
top: 79px;
left: 1124px;
}
.playBack .playTime span{
font-size: 14px;
}
.playBack .tishi2{
position: absolute;
top: 108px;
left: 98px;
}
.zhezhao{
visibility:hidden;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
background: #000;
opacity: 0.7;
}
.zhezhao .maskPic{
position:absolute;
top:30%;
left:40%;
z-index: 9999;
}
.exit{
display: none;
}
.exit .inform{
width:400px;
height: 220px;
border-radius: 20px;
background-color:#2a2f3a;
opacity: 0.9;
position:absolute;
top:30%;
left:35%;
z-index: 9999;
}
.exit .inform .inforHeader{
/* background: url(../images/Eimg/popup_icon_prompt.png) no-repeat 15px 5px; */
width:400px;
height:60px;
text-align: center;
line-height: 60px;
font-size: 30px;
background-color:#1e2127;
opacity: 0.8;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.inforMain .word{
width: 400px;
text-align: center;
font-size: 24px;
/* padding-left: 25px; */
padding-top: 25px;
}
.inforMain .advertising{
margin-left: 25px;
margin-top: 25px;
}
.inforMain .advertising img:nth-child(2){
margin-top: 45px;
margin-left: 38px;
}
.inforMain .button{
text-align: center;
margin-top: 30px;
/* margin-left: 38px; */
}
.inforMain .button .determine,.cancel{
font-size: 24px;
display: inline-block;
text-align: center;
line-height: 45px;
background-color: #2b2424;
width: 125px;
height: 45px;
border-radius:30px;
/* margin-left: 50px; */
}
.determine {
margin-right: 20px;
}
.inforMain .button .buttonSel{
background-color: rgb(232,130,45);
}
3.引入的js文件
3.1 config.js 配置的接口请求地址
/**
* 公共路径配置
*/
// 阿里
var baseURL = "http://59.110.50.146:8080/ntms/";
var IMGURL = "http://59.110.50.146";
var VIDEOURL = "http://59.110.50.146";
var PLANFORMTAB = "BD";// 本地
3.2 fun.js
/**
* 获取iptv机顶盒参数
*/
function getIPTVConfig(name) {
return Authentication.CTCGetConfig(name);
}
/**
* 处理url传值
*/
function dealUrl(url) {
var json = {};
if (url.indexOf("?") > -1) {
var arr = url.split("?")[1];
var arrList = url.indexOf("&") > -1 ? arr.split("&") : arr.split("*");
for (var i in arrList) {
json[arrList[i].split("=")[0]] = arrList[i].split("=")[1];
}
}
return json;
}
/**
* 获取需要对url传递的参数,并处理
* needParam需要传递的新参数
* needJumpUrl需要跳转的url
* oldUrl原页面的url
* addIcon拼接参数的符号
*/
function dealParam(needParam, needJumpUrl, oldUrl, addIcon) {
var oldUrlParam = dealUrl(oldUrl);
for (var key in oldUrlParam) {
if (!needParam[key]) {
needParam[key] = oldUrlParam[key];
}
}
for (var i in needParam) {
if (needJumpUrl.indexOf("?") > -1) {
needJumpUrl += addIcon + i + "=" + needParam[i];
} else {
needJumpUrl += "?" + i + "=" + needParam[i];
}
}
return needJumpUrl;
}
/**
* 获取时间戳
*/
function getTime() {
var time = Date.parse(new Date()).toString();//获取到毫秒的时间戳,精确到毫秒
time = time.substr(0, 10);//精确到秒
return time;
}
/**
* 焦点事件--放大效果
*/
function focusScale(element) {
element.classList.add("onFocus");
}
/**
* 取消--焦点事件--放大效果
*/
function blurScale(element) {
element.classList.remove("onFocus");
}
/**
* 提示消息
*/
function showMessage(info) {
var elementDiv = document.createElement("div");
var elementDivClass = document.createAttribute("class");
elementDivClass.value = "message_content";
elementDiv.setAttributeNode(elementDivClass);
var txtdiv = document.createTextNode(info);
elementDiv.appendChild(txtdiv);
var elementDivId = document.createAttribute("id");
elementDivId.value = "message_content";
elementDiv.setAttributeNode(elementDivId);
// var message_content = document.getElementById("message_content");
// var infoDiv = document.createElement("div");
// var txtdiv = document.createTextNode(info);
// infoDiv.appendChild(txtdiv);
// var infoDivClass = document.createAttribute("class");
// infoDivClass.value = "message_info";
// infoDiv.setAttributeNode(infoDivClass);
// message_content.appendChild(infoDiv);
document.body.appendChild(elementDiv);
var elementMarkDiv = document.createElement("div");
var elementMarkDivClass = document.createAttribute("class");
elementMarkDivClass.value = "message_mask";
elementMarkDiv.setAttributeNode(elementMarkDivClass);
var elementDivMarkId = document.createAttribute("id");
elementDivMarkId.value = "message_mask";
elementMarkDiv.setAttributeNode(elementDivMarkId);
document