<!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" id="video_index_{$key}"> <img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> <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="/portal/index/getVideoById?id={$vo.id}" 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"> <!--city_id--> <input type="hidden" value="{$vo.city_id}" class="li_city_video_id"> </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> <!--city_id--> <input type="hidden" value="0" class="city_video_id"> <!--视频索引--> <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" style="display:none;"> <!-- 遮罩层 --> <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 video_index = getUrlParam('video_index'); //默认第一个视频 if(video_index == ''){ //默认第一个视频 switch_video(0); //更换视频路径index video_index_url(0); }else{ switch_video(video_index); //更换视频路径index video_index_url(video_index); } //登录 var users = $('#users').val(); //未登录 if (users == 0) { //监听播放时间 var v_city_id = getUrlParam('city_id'); //解决从定位视频进入 var city_id_video = $('.city_video_id').val(); //非独角星球视频模块 if(v_city_id != 68){ if(city_id_video != 68){ video_mask('您还不是会员,可试看20秒'); } } var video = document.getElementById('video'); //使用事件监听方式捕捉事件 video.addEventListener("timeupdate", function() { //获取当前点击播放视频的city_id var city_video_id = $('.city_video_id').val(); var timeDisplay; //用秒数来显示当前播放进度 timeDisplay = Math.floor(video.currentTime); console.log(Math.floor(video.currentTime)); video.addEventListener('play', function() { video.currentTime = 0; }); //非独角星球视频模块 if(v_city_id != 68){ //当视频播放到 15s的时候做处理 if(city_video_id != 68){ if (timeDisplay >= 20) { video.addEventListener('play', function() { video.currentTime = 0; }), video_mask('会员可观看完整视频'); video.pause(); } } } }, false); } var value = $('#cityName').val(); if (value != '') { $('.show_city').val(value); } else { $('.show_city').val('所有'); } //点击切换 $('.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('http://'+window.location.host+'/portal/region/getMoreVideo?city_id=0&video_index='+index+'&#video_index_'+index); }else{ $('.video_index_url').val('http://'+window.location.host+'/portal/region/getMoreVideo?city_id='+city_id+'&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(); var city_video_id = li_index.children('.li_city_video_id').val(); $('#li_id').val(id); $('.post_title').text(post_title); $('.city_name').text(city_name); $('.framing').text(framing); $('.release_time').text(release_time); $('.city_video_id').val(city_video_id); //是否收藏 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>