弹出窗播放视频（多个视频文件）

最新推荐文章于 2023-02-21 22:38:49 发布

爱吃芒果的摩羯

最新推荐文章于 2023-02-21 22:38:49 发布

阅读量937

点赞数

分类专栏： thinkphp html / js / jq 文章标签：视频列表弹出窗播放

本文链接：https://blog.youkuaiyun.com/qq_26894083/article/details/79664699

版权

这篇博客详细介绍了如何使用video.php和jq.box.js来实现在网页中点击后弹出窗口播放多个视频文件的功能。内容包括控制器的设置和JavaScript交互逻辑。

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

控制器：

   public function video(){
    	//分类详情
    	$cid = M("Conclass")->where(array('conclassname'=>'视频锦集'))->getField("id");
    	$newsdata = $this->getNews($cid,1,0,0,1,10);
		$this->assign("newsdata",$newsdata);
		$this->display();
	}

    public function getVideo(){
        $tid = I("id");
        // M("Content")->execute("update tp_content set hits=hits+1 where id=$id");
        if($tid>0){
            $data = M("Content")->where("id=$tid")->find();
        }
        $this -> ajaxReturn($data);
    }

video.php

<head>
-------------------------------------------------------------------------------------------------------
<script src="__CN__/js/jq.box.js"></script>
<style type="text/css">
    #alert_main p{
        margin: 0px auto;
        width: 660px;
        height: 460px;
    }
 
</style>
</head>
---------------------------------------------------------------------------------------------------------
<div class="w1100 movie_ul">
	<ul class="cf">
        <volist name="newsdata" id="vo">
        	<li class="fl">
                <a href="javascript:;" class="click_mov" οnclick="showVideo(<{$vo.id}>)">
                    <img src="__PUBLIC__/Uploads/Content/<{$vo.conphoto}>" width="350" height="220" class="movie_pro" />
                    <h1><{$vo.title}></h1>
                </a>    
            </li>
        </volist>
    </ul>
    <div class="page">
        <{$page}>
    </div>
</div>
<script language="javascript">
    function showVideo(pId){
        $.post("<{:U('Beauti/getVideo')}>", { "id":pId },function(data){
            $(".alert_name").text("");
            $(".alert_main").text("");
            $(".alert_name").append(data.title);
            $(".alert_main").append(data.concon);
         } );
    }
</script>
<div class="alert">
	<div class="alert_title tc">
    	<h1 class="alert_name"></h1>
		<img src="__CN__/images/close.png" class="close_content" />
    </div>    
    <div class="alert_main">

    </div>
</div>

jq.box.js

/* 
* wjybox.js 
* 版权属于原作者，此处进行了优化，修改。
* 2013-09-03 #分离样式，结构调整；整理出默认样式，添加api参数style
*/
(function($) {
    //给页面装载CSS样式
    var css = '<style type="text/css">' +
        '#wjyBlank{position:absolute;z-index:9999;left:0;top:0;width:100%;height:0;background:black;}' +
        '.wrap_out{position:absolute;z-index:9999;}' +
        '.wrap_remind{width:16em;padding:30px 40px;}' +
        '.wrap_remind p{margin:10px 0 0;}' +
        '.submit_btn{display:inline-block;padding:3px 12px 1.99px;background:#486aaa;border:1px solid;border-color:#a0b3d6 #34538b #34538b #a0b3d6;color:#f3f3f3;line-height:16px;font-size:12px;cursor:pointer;overflow:visible;}' +
        '.submit_btn:hover{text-decoration:none;color:#ffffff;}' +
        '.cancel_btn{display:inline-block;padding:3px 12px 1.99px;background:#eee;border:1px solid;border-color:#f0f0f0 #bbb #bbb #f0f0f0;color:#333;line-height:16px;cursor:pointer;overflow:visible;}' +
        '.wrap_close{cursor:pointer;}' + 
    '</style>';
    $("head").append

最低0.47元/天解锁文章