播放后如何在leafletJS中隐藏视频覆盖？答案

【问题标题】：How to hide a video overlay in leafletJS after playing?播放后如何在leafletJS中隐藏视频覆盖？
【发布时间】：2018-05-13 22:58:52
【问题描述】：

我正在构建一个在 LeafletJS 地图上覆盖视频的网站，我希望视频在播放一次后消失（就像预告片一样）。

我是 JS 的新手，所以我尝试了很多 - 我想这与一个 onended 事件有关： 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>

【问题讨论】：

@IvanSanchez - 视频在 Chrome 67 中没有自动播放，因此在地图上仍然是图像，你知道当检测到 chrome 时我如何让它播放或消失吗？感谢帮助。我的测试网站是：dominique.turzer.eu
为此打开一个新问题。
谢谢，我刚做了。

标签： javascript html css video leaflet

【解决方案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 的 ended event。在该事件处理程序中，remove 地图上的视频叠加层：

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

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

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

【讨论】：

工作得很好！非常感谢！
@Turzer：请注意，感谢人们的方式也是接受帮助您解决问题的答案。这样，人们也知道您的问题已解决。一旦你获得足够的声望，你也将获得upvote的能力。

【解决方案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)
});

【讨论】：