Как изменить местоположение маркера при изменении времени видеопотока?
Я пытаюсь синхронизировать время видеопотока с положением маркера. По мере увеличения времени видео положение маркера на карте автоматически начинает меняться.
Я попробовал это сделать и теперь могу сделать это с помощью кнопки, но я хочу, чтобы это было сделано автоматически.
Что я уже пробовал:
<!DOCTYPE html>
<html>
<body bgcolor="black">
<div class="cont1"style="width:50%;float:left;">
<div class="cont3">
<button onclick="getCurTime()" type="button">Get current time position</button><br>
<button onclick="setCurTime1()" type="button">Set time position to 5 seconds</button><br>
<button onclick="setCurTime2()" type="button">Set time position to 10 seconds</button><br> </div> <div class="cont2">
<video id="myVideo" width="100%" height="400" controls>
<source src="1.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
float:right;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([51.5, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var LeafIcon = L.Icon.extend({
});
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'});
var vid = document.getElementById("myVideo");
function getCurTime() {
alert(vid.currentTime);
}
function setCurTime1() {
vid.currentTime=5;
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
}
function setCurTime2() {
vid.currentTime=10;
L.marker([51.4, -0.07], {icon: greenIcon}).addTo(map);
}
</script>
</body>
</html>
0x01AA
Вот пример, где они timeevent: индикатор выполнения html-видео с сообществом js - eLearning Brothers[^]
или вот это: https://www.nikpro.com.au/customise-html5-video-player-element-in-a-real-example/[^]
Member 14589077
Спасибо, брат, это сработало, еще раз спасибо
0x01AA
Добро пожаловать