在时髦的地图中播放 m3u8 视频

Question

我正在使用时髦的地图自定义信息 window 来显示 HLS 视频，但是我无法让它工作。视频在地图区域之外工作，但不在信息 window 本身

内

  $(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 提要。

有人有想法还是我的做法全错了？

在此先感谢您的帮助

Answer 1

我不得不将脚本放在 callback: 中我只是将 videojs("video1"); 添加到 afterOpen: 我希望这对以后的人有所帮助。

在时髦的地图中播放 m3u8 视频

m3u8 video playback within snazzy maps

javascript

google-maps

handlebars.js

video.js