I was trying to play video in integrate HTML of App designer, but it is not working correctly on App. It does work in browsers.
조회 수: 10 (최근 30일)
이전 댓글 표시
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>
댓글 수: 0
답변 (2개)
Karanjot
2024년 6월 3일
편집: Karanjot
2024년 6월 3일
Hi,
It seems you’re encountering an issue where a video embedded in HTML is not playing correctly in an app designed with App Designer, but it works fine in browsers.
In order to embed a video in an HTML page for use in App Designer, I recommend you to follow the below linked documentation:
댓글 수: 0
Esther
2024년 8월 2일 9:25
MP4 videos are not supported for HTML components in the MATLAB Desktop. You may want to convert your video to an OGG video and include this in your "uihtml" component.
Note by the way that MP4 videos will work correctly in "uihtml" components in situations where you access your App through your system's web browser (with H.264 MP4 support). For example when running an App with "uihtml" component in MATLAB Online accessed through Google Chrome or when accessing a Web App on MATLAB Web App Server through Firefox, etc.
댓글 수: 0
참고 항목
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!