155 lines
4.7 KiB
Plaintext
155 lines
4.7 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
pageEncoding="UTF-8"%>
|
||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<%@include file="/views/common.jsp"%>
|
||
</head>
|
||
<style>
|
||
.ql-video{
|
||
height:700px;
|
||
width:1500px
|
||
}
|
||
</style>
|
||
<body>
|
||
<div id="view"></div>
|
||
<video id="video" class="ql-video" controls width="400px" heigt="400px"
|
||
src="http://47.114.150.226:80/erp/abc\product\\20210410\专业接单流程.mp4"></video>
|
||
<script id="videoInfo" type="text/html">
|
||
<!-- 0:新用户的时候不显示切换视频按钮 -->
|
||
<c:if test="${sessionScope.USER_SESSION.sysStatus ne '0'}">
|
||
{{# layui.each(d, function(index, item){ }}
|
||
<button data-src="{{item.imgUrl}}" onclick="videoClick(this)">{{item.filename}}</button>
|
||
{{# }); }}
|
||
</c:if>
|
||
</script>
|
||
</body>
|
||
<script>
|
||
// 点击按钮，切换视频
|
||
function videoClick(obj){
|
||
address = obj.getAttribute("data-src");
|
||
document.getElementById("video").src = address;
|
||
}
|
||
layui.use(['table','form','carousel','laytpl'], function(){
|
||
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
|
||
var carousel = layui.carousel;
|
||
var table = layui.table;
|
||
var laytpl = layui.laytpl;
|
||
|
||
window.errorDataHandle = function(){
|
||
//建造实例
|
||
ins = carousel.render({});
|
||
$.ajax({
|
||
url:"${pageContext.request.contextPath}/getImgs",
|
||
type:"GET",
|
||
data:{
|
||
proTypeValue : 999
|
||
},
|
||
success : function(result) {
|
||
var getTpl = document.getElementById('videoInfo').innerHTML,
|
||
view = document.getElementById('view');
|
||
laytpl(getTpl).render(result, function (html) {
|
||
view.innerHTML = html;
|
||
});
|
||
form.render();
|
||
// 如果没有轮播图就隐藏
|
||
if(result.length == 0){
|
||
document.getElementById("test1").style.display = "none"; //隐藏
|
||
}else{
|
||
ins.reload({
|
||
elem: '#test1',
|
||
width: '1500px', //设置容器宽度
|
||
height: '730px'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取登录用户的信息
|
||
$(document).ready(function() {
|
||
$.ajax({
|
||
url : "${pageContext.request.contextPath}/getUserInfo",
|
||
type : "get",
|
||
success : function(obj) {
|
||
var sysStatus = obj.data.userInfo.sysStatus
|
||
// 如果是新用户登陆，禁止快进视频
|
||
if(sysStatus == "0"){
|
||
// 禁止快进
|
||
var sym;
|
||
var video = document.querySelector("#video")
|
||
setInterval(function () {
|
||
var time = video.currentTime;
|
||
if(time-sym > 1){
|
||
video.currentTime = sym
|
||
}
|
||
sym = video.currentTime
|
||
},500);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
/* var arr=[
|
||
"http://47.114.150.226:80/erp/abc/product\\20210410/专业接单流程.mp4",
|
||
"http://47.114.150.226:80/erp/abc/product\\20210410/后台系统说明.mp4",
|
||
"http://47.114.150.226:80/erp/abc/product\\20210410/千牛操作.mp4",
|
||
"http://47.114.150.226:80/erp/abc/product\\20210410/常用材质说明.mp4"
|
||
]; */
|
||
var arr = []
|
||
$.ajax({
|
||
url : "${path}/getVideos",
|
||
type : "get",
|
||
success : function(obj) {
|
||
arr = obj
|
||
var ind = 0;
|
||
onload = function(){
|
||
video.src = arr[ind];
|
||
// 视频播放完后调用（有时候不调用）
|
||
video.onended = function(){
|
||
/* ind++;
|
||
// 从头播放
|
||
ind = ind > arr.length-1 ? 0 : ind;
|
||
this.src = arr[ind]; */
|
||
}
|
||
}
|
||
// 调用上面的方法
|
||
errorDataHandle()
|
||
var md = document.getElementsByTagName("video")[0];
|
||
// 播放完还会走这
|
||
md.addEventListener("ended",function(){
|
||
// 将循环播放放在这
|
||
ind++;
|
||
// 从头播放
|
||
ind = ind > arr.length-1 ? 0 : ind;
|
||
this.src = arr[ind];
|
||
if(ind == 0){
|
||
layer.confirm('视频播放完毕', {
|
||
icon: 1,
|
||
title:'提示',
|
||
btn: ['进入下一步','重新播放'],
|
||
btn1: function(index){
|
||
$.ajax({
|
||
url:"${pageContext.request.contextPath}/videoOverToChangeSysStatus",
|
||
contentType : 'application/json;charset=utf-8',
|
||
type : 'POST',
|
||
success:function (data) {
|
||
/* layer.msg('好的，请重新登陆系统开始考试吧~~',{icon:6,offset:"auto",time:2000},function(){
|
||
setTimeout("javascript:top.location.href='${pageContext.request.contextPath}/SysUser/logout'", 1000);
|
||
}); *///提示框
|
||
}
|
||
})
|
||
},
|
||
btn2: function(index){
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
</html> |