我正在建立一个在 leafletJS map 上覆盖视频的网站，我希望视频在播放一次后消失(就像预告片一样)。
我是 JS 的新手，所以我尝试了很多 - 我想这与一个已结束的事件有关: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onended_video
也许可以隐藏图层或将不透明度设置为 0.0？
这就是我的 map 现在的样子:
http://dominique.turzer.eu/index.php/de/
如果您能帮助我找到问题的解决方案，我将不胜感激!!!
<body>
<div id="mapid" style="width: 80em; height: 50em;"></div>
<script>
var mapid = L.map('mapid').setView([41.8939551, 12.479556], 14);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://stamen.com">Stamen</a>',
id: 'mapbox.streets'
}).addTo(mapid);
var videoUrls = [
'http://dominique.turzer.eu/media/mod_osmod/images/Film8.mp4'
];
var bounds = L.latLngBounds([[41.92398333, 12.45647433], [41.863167640465, 12.502337292]]);
var videoOverlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.7,
loop: false
}).addTo(mapid);
</script>
</body>
最佳答案
创建您的视频叠加层:
var videoOverlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.7,
loop: false
}).addTo(mapid);
Get a reference到HTMLVideoElement对于视频叠加:
var videoElement = videoOverlay.getElement();
Attach an event handler到ended event HTMLVideoElement 的。在该事件处理程序中，remove map 上的视频叠加层:
videoElement.addEventListener('ended', function(){
videoOverlay.remove();
});
您也可以使用 Leaflet DOM 事件包装器:
L.DomEvent.on(videoElement, 'ended', function(){
videoOverlay.remove();
});
关于javascript - 如何在播放后隐藏leafletJS中的视频叠加层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50321327/