技术成就梦想
努力展现自我

代码实现WordPress集成视频解析页面功能

注意:本视频解代码属于二次解析,这里博主不多介绍,如果想要搭建一次解析的小伙伴,可以直接跳过了

本文参照文字咖博主的文章转载并加以解释

1. 核心代码

代码有点长,在主题根目录新建一个 video.php 文件中(名称可以自定义),将下面代码复制该文件中

<?php 
/* Template Name: 视频解析 */
	get_header(); 
?>
<style type="text/css">
	#primary {
		width: 100%;
	}
	.contact-page {
		margin: 40px 0;
	}
	#contact label {
		display: block;
		margin: 0 0 0 30px;
		padding: 5px 0;
	}
	#contact input, #contact textarea {
		background: #fff;
		margin: 0 0 0 30px;
		padding: 6px;
		width: 40%;
		border: 1px solid #ebebeb;
		border-radius: 2px;
		-webkit-appearance: none;
	}
	#contact textarea {
		width: 80%;
	}
	#contact input[type="submit"]{
		border: none;
		padding: 0 5px;
		height: 42px;
		margin-top: 10px;
		cursor: pointer;
		background: #0088cc;
		color: #fff;
		border-radius: 2px;
	}
	#contact input[type="submit"]:hover{
		background: #666;
		border-radius: 2px;
		transition: all 0.2s ease-in 0s;
	}
	.errormsg, .successmsg{
		color: #d80000;
		padding: 10px;
		border-radius: 2px;
	}
	.successmsg {
		background: #91c24f;
	}
	.tcha {
		margin: 0 0 0 30px;
	}
	.container{
		position: relative;
		margin: 0 auto;
		max-width: 1200px;
		padding: 0;
	}
	@media (max-width: 767px){
		iframe#player {
		height:260px;
	}
}

	/*logo平台*/
	.title-tit {
			font-family: "微软雅黑";
			padding: 20px 0 10px;
		}
	.title-tit h4 {
		display: inline-block;
		border-left: 5px solid #0093FF;
		padding-left: 10px;
		font-size: 16px;
		line-height: 1rem;
		font-weight: bold;
	}
	.logo-lie {
		background: #fff;
		text-align: center;
		padding: 4px 10px;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		-webkit-transition: border linear .2s, box-shadow linear .2s;
		-moz-transition: border linear .2s, box-shadow linear .2s;
		-o-transition: border linear .2s, box-shadow linear .2s;
		transition: border linear .2s, box-shadow linear .2s;
	}

	.logo-lie a {
		text-align: center;
	}

	.logo-box>.container>.row>.col-xs-4 {
		padding-right: 5px;
		padding-left: 5px;
		margin-bottom: 5px;
	}

	.logo-box>.container>.row>.col-lg-12 {
		padding-right: 0px;
		padding-left: 0px;
	}
</style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/1.4.0/js/bootstrap-modal.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('b a(){0 6=1.2("9").4;0 5=1.2("3");0 3=1.2("3").c;0 8=5.e[3].4;0 7=1.2("f");7.d=8+6}',16,16,'var|document|getElementById|jk|value|jkurl|diz|cljurl|jkv|url|dihejk|function|selectedIndex|src|options|player'.split('|'),0,{}))</script>
	<script type="text/javascript">
        $(document).ready(function(){
            $('#contact').ajaxForm(function(data) {
				if (data==1){
                    $('#success').fadeIn("slow");
                    $('#bademail').fadeOut("slow");
                    $('#badserver').fadeOut("slow");
                    $('#contact').resetForm();
                }
				else if (data==2){
                    $('#badserver').fadeIn("slow");
                }
				else if (data==3)
                {
                    $('#bademail').fadeIn("slow");
                }
            });
        });
    </script>
<section>
	<div class="container">
		<div class="col-md-14 column">
			<div class="panel panel-default">
				<div id="kj" class="panel-body">
					<iframe src="" id="player" width="100%" height="460px"  allowFullScreen="true" allowtransparency="true" frameborder="0" scrolling="no" style="background-color:black;"></iframe>
				</div>
			</div>
		</div>
		<br><br>
		<div class="col-md-14 column">
			<form method="post" id="khname">
				<div class="input-group" style="width: 100%;">
					<span class="input-group-addon input-lg" style="width: 80px; ">选择接口</span>
					<select class="form-control input-lg" id="jk">
						<option rel="nofollow" value="https://api.47ks.com/webcloud/?v=&url=" selected>SSL1号引擎系统</option>
						<option rel="nofollow" value="https://jx.ab33.top/vip/?url=">SSL2号引擎系统</option>
						<option rel="nofollow" value="https://jx.km58.top/jx/?url=">SSL3号引擎系统</option>
						<option rel="nofollow" value="https://api.smq1.com/?url=">SSL4号引擎系统</option>
						<option rel="nofollow" value="https://api.653520.top/vip/?url=">SSL5号引擎系统</option>
						<option rel="nofollow" value="https://jx.9ku.wang/9ku/?url=">SSL6号引擎系统</option>
						<option rel="nofollow" value="https://jx.618g.com/?url=">618G解析</option>
						<option rel="nofollow" value="https://www.fantee.net/fantee/?url=">范特尔</option>
					</select>
				</div>
			<br>
			<div class="input-group" style="width: 100%;">
				<span class="input-group-addon input-lg" style="width: 80px;">播放地址</span>
				<input class="form-control input-lg" type="search" placeholder="输入视频页面网址" id="url">
			</div>
			<br>
			<div>
				<button id="bf" type="button" class="btn btn-primary btn-lg btn-block" onclick="dihejk()">点击播放</button>
			</div>
			</form>
		</div>
	</div>
	<br/><br/>
	<!--平台logo	-->
		<div class="container-fluid logo-box">
			<div class="container ">
				<div class="row">
					<div class="col-lg-12">
						<div class="title-tit">
							<h4>现已支持网站</h4>
						</div>
					</div>
				</div>
				<!--第一行-->
				<div class="row">
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺会员">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/iqiyilogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://v.qq.com/" target="_blank" title="腾讯会员中心">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/qqlogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.youku.com/" target="_blank" title="优酷会员中心">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/youkulogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.mgtv.com/" target="_blank" title="芒果会员中心">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/hunantvlogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.le.com/" target="_blank" title="乐视会员中心">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/letvlogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.tudou.com" target="_blank" title="土豆会员中心">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/tudoulogo.png" />
							</a>
						</div>
					</div>
				</div>
				<!--第一行结束-->
				<!--第二行开始-->
				<div class="row">
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.baofeng.com/" target="_blank" title="暴风会员">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/baofeng.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://vip.1905.com/" target="_blank" title="1905电影网视频">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/1905logo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.kankan.com/" target="_blank" title="天天看看">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/kankan.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.pptv.com/" target="_blank" title="PPTV聚力">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/pptv.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.yinyuetai.com/" target="_blank" title="音悦台MV">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/yinyuetailogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.fun.tv/" target="_blank" title="风行视频">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/fengxing.png" />
							</a>
						</div>
					</div>
				</div>
				<!--第二行结束-->
				<!--第三行开始-->
				<div class="row">
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.wasu.cn/" target="_blank" title="WASU华数视频">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/wasulogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://video.sina.com.cn/" target="_blank" title="新浪视频">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/sinalogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="https://film.sohu.com/" target="_blank" title="搜狐视频">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/sohulogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://tv.cctv.com/" target="_blank" title="央视网">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/cntvlogo.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2 ">
						<div class="logo-lie">
							<a href="http://www.acfun.cn/" target="_blank" title="Ac弹幕网">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/acfun.png" />
							</a>
						</div>
					</div>
					<div class="col-xs-4 col-sm-2">
						<div class="logo-lie">
							<a href="http://www.bilibili.com/" target="_blank" title="哔哩哔哩">
								<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/diy/logo/bilibili.png" />
							</a>
						</div>
					</div>
				</div>
				<!--第三行结束-->
				<!---->
			</div>
		</div>
	
</section>
<?php get_footer(); ?>

2. logo 图片

将下面链接中的 logo 图片复制到主题根目录中的 diy 文件夹中,路径为:dux/diy/logo
链接: https://pan.baidu.com/s/1_Nmrx55oFqGkmD8BifHtrQ      提取码: 6ixu

这里注意的是上传到主题目录为diy文件夹下logo文件下的相关图片,否则会显示异常。

3. 使用方法

新建页面 ==> 模板选择“视频解析” ==> 发布即可!

赞(2) 打赏
未经允许不得转载:鸿华工作室 » 代码实现WordPress集成视频解析页面功能
分享到: 更多 (0)

鸿华网络工作室,收集各类技术类优秀文章,少走弯路学习

NAS数据存储中心鸿华在线音乐

觉得文章有用就打赏一下文章作者

微信扫一扫打赏