景龙 / xingqiu · 提交

转到一个项目

作者 景龙
提交 077e6911febb0ec40b6722daca304c694799108c 1 个父辈 7850d1e8
1 个管道 的构建 通过 耗费 0 秒

调试视频二维码

内嵌 并排对比
正在显示 1 个修改的文件 包含 310 行增加 和 305 行删除
... ... @@ -12,20 +12,20 @@
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;
... ... @@ -34,343 +34,348 @@
</head>
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<include file="public@header" />
<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 class="mask">
</div>
<div class="show_9 clearfix">
<!-- 视频侧边选择 -->
<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">
<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 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 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_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 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 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>
<div class="bd_weixin_popup_foot">
打开微信，使用“扫一扫”<br>
点击右上角，即可将网页分享至朋友圈。
</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>
<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() {
</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();
}
/* 关闭二维码弹出层 */
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" //前景颜色
});
}
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');
</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("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;
});
//当视频播放到 15s的时候做处理
if (timeDisplay >= 20) {
video.addEventListener('play', function() {
video.currentTime = 0;
}),
video_mask('会员可观看完整视频');
video.pause();
}
}, false);
}
//默认第一个视频
switch_video(0);
//更换视频路径index
video_index_url(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('所有');
}
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').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();
}
$('.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)');
});
//下拉框选择城市
$('.select ul li').click(function() {
$('.show_city').val($(this).text());
$('.select ul').hide();
// 点击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();
}
$('#city_id').val($(this).val());
});
$('form').submit();
});
//下拉框选择城市
$('.select ul li').click(function() {
$('.show_city').val($(this).text());
$('.select ul').hide();
// 弹出框
setInterval(function() {
$('.video_mask').hide();
}, 4000);
$('#city_id').val($(this).val());
$('.curren').eq(0).addClass('video_active');
$('form').submit();
});
function video_index_url(index){
var city_id = getUrlParam('city_id');
if(city_id == ''){
$('.video_index_url').val(window.location.href+'?video_index='+index);
}else{
$('.video_index_url').val(window.location.href+'&video_index='+index);
}
}
// 弹出框
setInterval(function() {
$('.video_mask').hide();
}, 4000);
//切换视频
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);
$('.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);
}else{
$('.video_index_url').val(window.location.href+'&video_index='+index);
}
// 点击播放
function bofang() {
video.play();
$('#video').attr('controls', 'controls');
$('.play_button').hide();
$('.video_poster').css('z-index', '-1');
}
}
//切换视频
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);
//是否收藏
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')
}
}
});
}
is_collections(id);
//是否点赞
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')
}
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')
}
});
}
</script>
}
});
}
//是否点赞
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>
\ No newline at end of file
... ...