Воспроизведение видео m3u8 в шикарных картах - PullRequest
Новая
       11

Воспроизведение видео m3u8 в шикарных картах

0 голосов
/ 01 января 2019

Я использую настраиваемое информационное окно для отображения видео HLS, однако я не могу заставить его работать.видео работает за пределами области карты, но не в самом информационном окне 

  $(function() {
    // Create the map
    var map = new google.maps.Map($('.map-canvas')[0], {
        zoom: 6,
        styles: mapStyle,
        center: new google.maps.LatLng(42.7875265, -101.0458982)
    });
    var locations = [
        ['Cobram Barooga Golf Club', 40.4840985, -106.8686117]
        ];
 // Set up handle bars
    var template = Handlebars.compile($('#marker-content- 
    template').html());
if (document.getElementById("video1")) {
   videojs("video1").ready(function() {
   });
       }

for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
        });
     // Set up a close delay for CSS animations
        var info = null;
        var closeDelayed = false;
        var closeDelayHandler = function() {
            $(info.getWrapper()).removeClass('active');
            setTimeout(function() {
                closeDelayed = true;
                info.close();
            }, 300);
        };

        // Add a Snazzy Info Window to the marker
        info = new SnazzyInfoWindow({
            marker: marker,
            wrapperClass: 'custom-window',
            offset: {
                top: '10px'
            },
            edgeOffset: {
                top: 50,
                right: 60,
                bottom: 50
            },
            border: false,
            closeButtonMarkup: '<button type="button" class="custom-close"></button>',
            content: template({
                stuff:"",           
            }),
            callbacks: {
                open: function() {
                    $(this.getWrapper()).addClass('open');
                },
                afterOpen: function() {
                    var wrapper = $(this.getWrapper());
                    wrapper.addClass('active');
                    wrapper.find('.custom-close').on('click', closeDelayHandler);
                },
                beforeClose: function() {
                    if (!closeDelayed) {
                        closeDelayHandler();
                        return false;
                    }
                    return true;
                },
                afterClose: function() {
                    var wrapper = $(this.getWrapper());
                    wrapper.find('.custom-close').off();
                    wrapper.removeClass('open');
                    closeDelayed = false;
                }
            }
        });

    }
    // Open the Snazzy Info Window

  });'


 <script id="marker-content-template" type="text/x-handlebars-template">
<section>
                  <video id="video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">

при использовании mp4 работает хорошо, но HLS использует канал m3u8 VLS.

Anyoneесть мысль или я все это пойду не так?

Заранее спасибо за помощь

1 Ответ

0 голосов
/ 05 января 2019

Мне пришлось поместить скрипт в callback: Я просто добавил videojs("video1"); к afterOpen: Надеюсь, это поможет кому-то в будущем.

...