Here is my code for HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件选择器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.chosefile {
position: absolute;
top: 50px; /* 距顶部50像素 */
left: 50px; /* 距左侧50像素 */
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: background-color 0.3s, transform 0.2s;
}
.calc {
position: absolute;
top: 50px; /* 距顶部50像素 */
left: 200px; /* 距左侧50像素 */
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: background-color 0.3s, transform 0.2s;
}
.chosefile:hover, .calc:hover {
background-color: #0056b3;
}
.chosefile:active, .calc:hover {
transform: scale(0.98);
}
</style>
<style>
#frameMarker {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
}
#coordinateArea {
width: 100%;
height: 20px;
position: relative;
background-color: #ddd;
}
</style>
</head>
<body>
<input type="file" id="fileInput" style="display: none;" />
<button class="chosefile" onclick="setup()">选择文件</button>
<button class="calc" onclick="setup();">选择</button>
<div id="prompt">
<span><label for="prompt"><strong>Data from MATLAB will display here:</strong></label></span>
<br/><br/>
<div id ="dataDisplay">Please set data in MATLAB...</div>
</div>
<video id="videoPlayer" width="320" height="240" controls>
<source src="E:/OneDrive/BDF/test.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<div id="coordinateArea">
<div id="frameMarker"></div>
</div>
</body>
<script type="text/javascript">
function setup(htmlComponent) {
let button1 = document.querySelector(".calc");
let button2 = document.querySelector(".chosefile")
button1.addEventListener("click", function(event) {
htmlComponent.sendEventToMATLAB("ButtonClicked",1);
});
button2.addEventListener("click", function(event) {
htmlComponent.sendEventToMATLAB("ChosefileClicked",1);
});
htmlComponent.addEventListener("DataChanged", function(event) {
document.getElementById("dataDisplay").innerHTML = htmlComponent.Data;
});
}
</script>
<script>
document.getElementById('videoPlayer').addEventListener('timeupdate', function() {
var video = document.getElementById('videoPlayer');
var marker = document.getElementById('frameMarker');
var duration = video.duration;
var currentTime = video.currentTime;
var coordinateAreaWidth = document.getElementById('coordinateArea').clientWidth;
// 计算标记的位置
var position = (currentTime / duration) * coordinateAreaWidth;
marker.style.left = position + 'px';
});
</script>
</html>
