机顶盒（Iptv）EPG页面实现视频播放

ddsuuny

已于 2022-05-11 17:58:24 修改

阅读量6.9k

点赞数 6

CC 4.0 BY-SA版权

文章标签：音视频 xhtml c#

于 2022-03-01 15:39:11 首次发布

本文链接：https://blog.csdn.net/ddsuuny/article/details/123207335

本文介绍了如何在机顶盒的EPG页面中实现视频播放，包括play.html的HTML部分，vodplay.css的样式引用，以及一系列如config.js、fun.js、ajaxMy.js等JavaScript文件的使用，用于处理接口请求、功能实现和媒体控制等。

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

1.html部分：play.html

2.引入的 vodplay.css

3.引入的js文件

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);