get_more_video.html 13.6 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星球影院更多</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css">
    <style>
        video::-internal-media-controls-download-button {
            display: none;
        }

        video::-webkit-media-controls-enclosure {
            overflow: hidden;
        }

        video::-webkit-media-controls-panel {
            width: calc(100% + 30px);
        }

        #collections {
            width: 30px;
            height: 30px;
        }

        #likes {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<include file="public@header" />

<!-- 弹出框 -->
<div class="mask">
</div>
<div class="show_9 clearfix">
    <!-- 视频 -->
    <div class="show_9_video">
        <img class="video_poster iop" src="" alt="">
        <video id="video" width="100%" height="426" src="" controlsList="nodownload"></video>
        <img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
        <div class="video_box"></div>

    </div>
    <!-- 视频侧边选择 -->
    <div class="show_9_video_aside">
        <!-- 顶部 -->
        <div class="show_9_video_asideTie clearfix">
            <p>专辑</p>
            <input type="hidden" value="{$cityName}" id="cityName">
            <form method="GET" action="/portal/region/getMoreVideo">
                <div class="select">
                    <input type="text" class="show_city" value="所有" readonly="readonly">
                    <img src="__TMPL__/public/assets/starImg/down.png" alt="">
                    <ul style="min-height:98px;max-height:300px;overflow-y: scroll;width:145px;">
                        <li>所有</li>
                        <volist name="city_name" id="vo">
                            <li value="{$vo.id}">{$vo.name}</li>
                        </volist>
                    </ul>
                    <input type="hidden" value="0" name="city_id" id="city_id">
                    <div style="display:none;">
                        <input type="submit" id="city_submit" />
                    </div>
                </div>
            </form>
        </div>
        <!-- 视频 -->
        <div class="show_9_video_asideCon">
            <ul class="curren">
                <volist name="res['data']" id="vo">
                    <li class="clearfix">
                        <img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" style="opacity: 0.3;">
                        <p>
                            {$vo.post_title}
                        </p>
                        <!--id-->
                        <input type="hidden" value="{$vo.id}" class="li_id">
                        <input type="hidden" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
                        <!--标题-->
                        <input type="hidden" value="{$vo.post_title}" class="li_post_title">
                        <!--国家-->
                        <input type="hidden" value="{$vo.city_name}" class="li_city_name">
                        <!--取景-->
                        <input type="hidden" value="{$vo.framing}" class="li_framing">
                        <!--上映时间-->
                        <input type="hidden" value="{$vo.release_time}" class="li_release_time">
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <!-- 底部 -->
    <div class="show_9_video_asideTxt clearfix">
        <!-- 标题 -->
        <h1 class="post_title"></h1>
        <!-- 国家 -->
        <div class="show_9_video_asideTxt2">
            <!--<p>国家：<span class="city_name"></span></p>-->
            <input type="hidden" value="" id="li_id">
            <p>取景：<span class="framing"></span></p>
            <p>上映时间：<span class="release_time"></span></p>
            <!--视频索引-->
            <input type="hidden" value="0" class="video_index">
            <!--视频url-->
            <input type="hidden" value="0" class="video_index_url">
        </div>
        <!-- 分享 -->
        <div class="show_9_video_asideTxt3 clearfix">
            <p>分享:</p>
            <input type="hidden" class="collection" value="">
            <input type="hidden" class="like" value="">
            <img src="__TMPL__/public/assets/starImg/aicon_89.png" alt="" onclick="wxShow()">
            <img src="__TMPL__/public/assets/starImg/aicon_90.png" alt="" class="wb_share_video">
            <img id="collections" src="__TMPL__/public/assets/starImg/bicon_02.png" alt="">
            <img id="likes" src="__TMPL__/public/assets/starImg/bicon_031.png" alt="">
        </div>
    </div>
</div>
<!--微信分享-->
<!-- 二维码弹出层 -->
<div class="wx-qrcode-wrapper">
    <!-- 遮罩层 -->
    <div class="mask"></div>
    <div class="wx-qrcode" style="width:230px;">
        <div class="share">
            <span style="font-size: 14px;text-align: center;">分享到微信朋友圈</span>
            <!-- 关闭图标 -->
            <a href="javascript:;" class="icon-close2" onclick="wxHide()">×</a>
        </div>

        <!-- 生成的二维码容器 -->
        <div id="qrcode"></div>
        <input type="hidden" id="code1" value="0">
        <div class="bd_weixin_popup_foot">
            打开微信，使用“扫一扫”<br>
            点击右上角，即可将网页分享至朋友圈。
        </div>
    </div>
</div>
<include file="public@footer" />
<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/js/public.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
    /* 点微信图标，触发二维码弹出层显示 */
    function wxShow() {
        if($('#code1').val() == 0){
            $('.wx-qrcode-wrapper').show();
            qrcode();
        }
        $('#code1').val(1);
    }

    /* 关闭二维码弹出层 */
    function wxHide() {
        $('.wx-qrcode-wrapper').hide();
        $('#qrcode').children().remove();
        $('#code1').val(0);
    }

    function qrcode(){
        /* 生成二维码 */
        var url = $('.video_index_url').val();
        $("#qrcode").qrcode({
            text: url, //设置二维码内容
            render: "canvas", //设置渲染方式
            width: 220, //设置宽度,默认生成的二维码大小是 256×256
            height: 220, //设置高度
            typeNumber: -1, //计算模式
            background: "#ffffff", //背景颜色
            foreground: "#000000" //前景颜色
        });
    }

</script>
<script>
    // 星域秀场视频
    $(function() {
        //禁止下载
        $('video').bind('contextmenu', function() {
            return false;
        });
        //登录
        var users = $('#users').val();
        if (users == 0) {
            //监听播放时间
            video_mask('您还不是会员，可试看20秒');
            var video = document.getElementById('video');

            //使用事件监听方式捕捉事件
            video.addEventListener("timeupdate", function() {
                var timeDisplay;
                //用秒数来显示当前播放进度
                timeDisplay = Math.floor(video.currentTime);
                console.log(Math.floor(video.currentTime));
                video.addEventListener('play', function() {
                    video.currentTime = 0;
                });
                //当视频播放到 15s的时候做处理
                if (timeDisplay >= 20) {
                    video.addEventListener('play', function() {
                        video.currentTime = 0;
                    }),
                        video_mask('会员可观看完整视频');
                    video.pause();
                }
            }, false);
        }
        //默认第一个视频
        switch_video(0);
        //更换视频路径index
        video_index_url(0);

        var value = $('#cityName').val();
        if (value != '') {
            $('.show_city').val(value);
        } else {
            $('.show_city').val('所有');
        }

        $('.curren').children('li').children('.li_img').css('opacity', '0.3');
        $('.curren').children('li').eq(0).children('.li_img').css('opacity', '1');


        //点击切换
        $('.curren li').click(function() {
            var index = $(this).index();
            $('.curren').children('li').children('.li_img').css('opacity', '0.3');
            $('.curren').children('li').children('p').css('color', 'rgba(153, 153, 153, 1)');
            switch_video(index);
            $('.video_index').val(index);
            //更换视频路径index
            video_index_url(index);
        });

        //鼠标滑过
        $('.curren li').hover(function() {
            $('.curren').children('li').children('.li_img').css('opacity', '0.3');
            $('.curren').children('li').children('p').css('color', 'rgba(153, 153, 153, 1)');
            $(this).children('.li_img').css('opacity', '1');
            $(this).children('p').css('color', 'rgba(9, 255, 142, 1)');
        });

        //  点击input下拉
        $('.select input').click(function() {
            if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
                $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png");
                $('.select ul').toggle();
            } else {
                $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/down.png");
                $('.select ul').toggle();
            }

        });

        //下拉框选择城市
        $('.select ul li').click(function() {
            $('.show_city').val($(this).text());
            $('.select ul').hide();

            $('#city_id').val($(this).val());

            $('form').submit();
        });

        // 弹出框
        setInterval(function() {
            $('.video_mask').hide();
        }, 4000);

        $('.curren').eq(0).addClass('video_active');
    });

    function video_index_url(index){
        var city_id = getUrlParam('city_id');
        if(city_id == ''){
            $('.video_index_url').val(window.location.href+'?video_index='+index+'&#video_index_'+index);
        }else{
            $('.video_index_url').val(window.location.href+'&video_index='+index+'&#video_index_'+index);
        }
    }

    //切换视频
    function switch_video(index) {
        //视频路径
        var li_index = $('.curren').children('li').eq(index);
        //选中颜色
        li_index.children('.li_img').css('opacity', '1');
        li_index.children('p').css('color', 'rgba(9, 255, 142, 1)');

        var oneVideo = li_index.children('.li_video').val();
        $('#video').attr('src', oneVideo);
        // 视频封面图
        $('.video_poster').css('z-index', '10');

        var oneCover = li_index.children('.li_img').attr('src');
        $('.video_poster').attr('src', oneCover);
        $('.play_button').css({
            'z-index': "11",
            "display": "block"
        });
        //视频id,标题，国家，取景，上映时间
        var id = li_index.children('.li_id').val();
        var post_title = li_index.children('.li_post_title').val();
        var city_name = li_index.children('.li_city_name').val();
        var framing = li_index.children('.li_framing').val();
        var release_time = li_index.children('.li_release_time').val();
        $('#li_id').val(id);
        $('.post_title').text(post_title);
        $('.city_name').text(city_name);
        $('.framing').text(framing);
        $('.release_time').text(release_time);

        //是否收藏
        is_collections(id);

        //是否点赞
        is_likes(id);

    }
    // 点击播放
    function bofang() {
        video.play();
        $('#video').attr('controls', 'controls');
        $('.play_button').hide();
        $('.video_poster').css('z-index', '-1');
    }

    //是否收藏
    function is_collections(article_id) {
        var host = 'http://' + window.location.host;
        $.ajax({
            type: 'POST',
            url: '/portal/star/is_collections',
            data: {
                'id': article_id,
            },
            dataType: 'json',
            async: false,
            success: function(data) {
                console.log(data);
                if (data.code == 1) {
                    $('#collections').attr('src', host + '/themes/simpleboot3/public/assets/starImg/bicon_15.png')
                } else {
                    $('#collections').attr('src', host + '/themes/simpleboot3/public/assets/starImg/bicon_02.png')
                }
            }
        });
    }

    //是否点赞
    function is_likes(article_id) {
        var host = 'http://' + window.location.host;
        $.ajax({
            type: 'POST',
            url: '/portal/star/is_likes',
            data: {
                'id': article_id,
            },
            dataType: 'json',
            async: false,
            success: function(data) {
                if (data.code == 1) {
                    $('#likes').attr('src', host + '/themes/simpleboot3/public/assets/starImg/bicon_161.png')
                } else {
                    $('#likes').attr('src', host + '/themes/simpleboot3/public/assets/starImg/bicon_031.png')
                }
            }
        });
    }
</script>
</body>

</html>