东风不来
三月的柳絮不飞

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

这个功能博主也是在 诗梦博客 分享的代码基础上修改的,经过几天调试,感觉差不多了,才敢把代码放出来!

在之前的代码基础上,博主做了几个简单的优化:
1. 修复视频无法全屏的问题
2. 新增加几个目前比较稳定的解析接口(当然这些接口也可以自已在网上找)
3. 调整整个页面的样式
4. 新增支持解析网站 logo 模块,使解析页面更加美观
5. 修复一些错误代码
修改后的效果可以点击 VIP 视频解析 查看,播放效果图如下:

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

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/1Ubaj691jYQzsfA16ySe50w      提取码: vgwr

3. 使用方法

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

赞(2) 打赏
未经允许不得转载:文字咖 » WordPress集成视频解析页面功能
分享到:

评论 5

6 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3

    感谢分享,找了好久,终于找到了!

    萌萌萌~ 2周前 (06-03) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  2. #2

    给力嗷

    沃茨 3周前 (05-29) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  3. #1

    这配图是真吓人,大晚上的越看越诡异

    天策无双 3周前 (05-26) 来自天朝的朋友 谷歌浏览器 Windows 10 回复

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

支付宝扫一扫打赏

微信扫一扫打赏