82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>视频播放</title>
|
|
<style>
|
|
html,
|
|
body{
|
|
width: 100%;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #F0F2F5;
|
|
}
|
|
#screen{
|
|
width: 100%;
|
|
height: 7%;
|
|
background-color: rgba(0,0,0,0);
|
|
position: absolute;
|
|
top: 94.5%;
|
|
z-index: 99;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="screen"></div>
|
|
<video id="myVideo" style="width: 100%;height: 100%" controlsList="nodownload nofullscreen" controls autoplay>
|
|
<source src="" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
<script src="../js/public/token.js"></script>
|
|
<script src="../js/public/public.js"></script>
|
|
<script src="../js/public/public_utils.js"></script>
|
|
<script src="../plugs/jquery/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
let video;
|
|
$(function () {
|
|
var filePath = localStorage.getItem("filePath");
|
|
console.log("filePath:"+filePath);
|
|
if(filePath == "" || filePath == null || filePath == "null"){
|
|
alert("视频获取失败!!!");
|
|
return;
|
|
}
|
|
|
|
let player = document.querySelector('#myVideo');
|
|
|
|
//测试用
|
|
player.src = 'http://192.168.0.14:1909/file/ynRealName/zys_cs/mp4.mp4';
|
|
//player.src = fileUrl + '/' + filePath;
|
|
|
|
player.play();
|
|
// 获取视频元素
|
|
video = document.getElementById("myVideo");
|
|
|
|
video.currentTime = Math.round(Number(trainProgress));
|
|
// 监听视频播放事件
|
|
video.addEventListener("play", function() {
|
|
console.log("视频开始播放");
|
|
});
|
|
|
|
// 监听视频暂停事件
|
|
video.addEventListener("pause", function() {
|
|
var currentTime = Math.round(video.currentTime);
|
|
console.log("视频已暂停" + currentTime + " seconds.");
|
|
});
|
|
})
|
|
|
|
function playLocation(){
|
|
//获取已观看时长、总时长
|
|
var json = {
|
|
"viewedTime": Math.round(video.currentTime).toString(),
|
|
"totalTime": video.duration
|
|
}
|
|
return json;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|