Как скрыть наложение видео в листовке JS после воспроизведения? - PullRequest
Новая
       0

Как скрыть наложение видео в листовке JS после воспроизведения?

0 голосов
/ 14 мая 2018

Я создаю сайт с наложением видео на карту листовки JS, и мне бы очень хотелось, чтобы видео исчезло (как трейлер) после его однократного воспроизведения.

Я новичок в 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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Если вы хотите только для первого посещения, вы можете использовать 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)
});
0 голосов
/ 14 мая 2018

Создайте наложение вашего видео: 

var videoOverlay = L.videoOverlay(videoUrls, bounds, {
    opacity: 0.7,
    loop: false
}).addTo(mapid);

Получить ссылку на HTMLVideoElement для наложения видео: 

var videoElement = videoOverlay.getElement();

Присоедините обработчик события к событию ended из HTMLVideoElement. В этом обработчике событий удаляет наложение видео со своей карты: 

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

В качестве альтернативы вы можете использовать оболочку событий Leaflet DOM: 

L.DomEvent.on(videoElement, 'ended', function(){
    videoOverlay.remove();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...