<%--
|
Created by IntelliJ IDEA.
|
User: Lenovo
|
Date: 2025/3/19
|
Time: 16:09
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>Title</title>
|
<!-- 添加视口元标签 -->
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<style>
|
/* 定义通用按钮样式 */
|
.el-button {
|
display: inline-block;
|
line-height: 1;
|
white-space: nowrap;
|
cursor: pointer;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
color: #606266;
|
-webkit-appearance: none;
|
text-align: center;
|
box-sizing: border-box;
|
outline: none;
|
margin: 0;
|
transition: .1s;
|
font-weight: 500;
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
-ms-user-select: none;
|
/* 调整按钮内边距以适应手机端 */
|
padding: 10px 16px;
|
font-size: 14px;
|
border-radius: 4px;
|
}
|
|
/* 定义主要按钮样式 */
|
.el-button--primary {
|
color: #fff;
|
background-color: #409eff;
|
border-color: #409eff;
|
}
|
|
/* 鼠标悬停效果 */
|
.el-button--primary:hover {
|
background: #66b1ff;
|
border-color: #66b1ff;
|
}
|
|
/* 去除 a 标签默认下划线 */
|
a.el-button {
|
text-decoration: none;
|
}
|
|
/* 视频样式，设置宽度为 100% 以自适应屏幕 */
|
video {
|
width: 100%;
|
height: auto;
|
}
|
</style>
|
</head>
|
<body>
|
<video id="myVideo" controls>
|
<source src="view/Home/Safer.mp4" type="video/mp4">
|
<source src="35.%20Inherently_Safer.mov" type="video/quicktime">
|
你的浏览器不支持播放此视频。
|
</video>
|
<p><a href="https://forms.office.com/Pages/ResponsePage.aspx?id=cA1LiPuZFUqgcaPAeoRMSjg6rEwGTKNAnzDiWqMXzSpUNzc1QUM0NFBWTlBKVjhMV1QzS0Y3UzFZSC4u&origin=QRCode" id="backButton" class="el-button el-button--primary">
|
完成视频观看
|
</a></p>
|
<script>
|
var lock = false
|
const video = document.getElementById('myVideo');
|
video.addEventListener('error', function() {
|
console.log('视频加载出错');
|
alert('视频加载出错，请检查网络或视频文件。');
|
});
|
setTimeout(function () {
|
// const backButton = document.getElementById('backButton');
|
// document.getElementById('backButton').style.display = '';
|
lock=true
|
},6000)
|
const backButton = document.getElementById('backButton');
|
backButton.addEventListener('click', function(event) {
|
console.log(lock)
|
|
if (lock ==false){
|
alert('未完成视频观看。');
|
event.preventDefault(); // 阻止默认的链接跳转行为
|
window.history.back(); // 返回上一级页面
|
return false
|
}else{
|
return true
|
}
|
|
|
//
|
});
|
</script>
|
</body>
|
</html>
|
