Question

我正在leafletJS地图上建立一个带有视频叠加的网站，我希望视频在播放一次后能够消失（如预告片）。

我是JS的新手，所以我尝试了很多 - 我想这与一个被引发的事件有关： https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onended_video

可能隐藏图层或不透明度可以设置为0.0？

这就是我现在的地图：

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 &copy; <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>

Answer 1

制作视频叠加层：

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到HTMLVideoElement的{{3}}。在该事件处理程序中，ended event来自其地图的视频叠加层：

videoElement.addEventListener('ended', function(){
    videoOverlay.remove();
});

您也可以使用Leaflet DOM事件包装器：

L.DomEvent.on(videoElement, 'ended', function(){
    videoOverlay.remove();
});

Answer 2

如果您只想在第一次访问时使用它，则可以使用cookie。您可以使用以下方法检查是否已定义：

document.cookie.indexOf('trailer') > -1

它将首次返回false。做你的事情，然后更新你的cookie

document.cookie = "trailer=true"

对于您的视频，您可以这样做：

$('video').on('ended',function(){
    // Remove your video from the map
    map.removeLayer(video)
});

播放后如何在leafletJS中隐藏视频叠加？

2 个答案: