javascript - 有没有办法将YouTube API播放器添加到传单控制窗口？

我正在制作包含geoJSON图层的传单地图。单击geoJSON层上的某个点时，在该点（通过“ youtube_id”字段指定）中标识的YouTube视频会在传单控制窗口中打开。我真的很希望能够获得视频的播放时间，而且看来唯一的方法就是使用YouTube iframe API并使用其playback status functions。

现在让地图工作的方法是将iframe对象添加到传单控制窗口中，类似于this tutorial的工作方式。这可以显示视频，但是在播放视频时无法获得播放时间。这是我的javascript的相关部分：

var geoj = GeoJSON.parse(dat, {Point: ['lat', 'lon']});

var style = {
    radius: 2,
    fillColor: "darkred",
    color: "darkred",
};

var YT_id;

var vidPlayer = L.control({position: 'bottomleft'});
vidPlayer.onAdd = function(mymap) {
    this._div = L.DomUtil.create('div', 'vidPlayer');
    this.update();
    return this._div;
};

vidPlayer.update = function (vidPopup) {
    this._div.innerHTML = '<h4>USGS CMG Video</h4>' + (vidPopup ? '<b>' + vidPopup + '</b><br />' : 'Select a video');
};
vidPlayer.addTo(mymap);

var vidPopup;
function onEachFeature(feature, layer) {
    layer.on('click', function(e) {
        YT_id = feature.properties.youtube_id;
        vidSec = feature.properties.video_second;
        vidPopup = "<iframe id=\"player1\" src=https://www.youtube.com/embed/" + YT_id + "?start=" + vidSec + "&autoplay=1" + " width=\"600\" height=\"450\" frameborder=\"0\"></iframe>";
        vidPlayer.update(vidPopup);
        lat = feature.geometry.coordinates[1];
        lng = feature.geometry.coordinates[0];
        var marker;
        mymap.on('click', function (e) {
            if (marker) {
                mymap.removeLayer(marker);
            }
            marker = new L.Marker([lat,lng]).addTo(mymap);
        });
        return YT_id;
        console.log(vidSec);
    });
}

var polyline = L.geoJSON(geoj, {
    onEachFeature: onEachFeature,
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, style);
    onEachFeature: onEachFeature;
    }
}).addTo(mymap);

mymap.fitBounds(polyline.getBounds());

L.control.scale({position: 'bottomright'}).addTo(mymap);

我以为可以将vidPopup函数中的onEachFeature更改为：

vidPopup = new YT.Player('player', {
    height: '400',
    width: '534',
    videoID: YT_id,
});

（如YouTube iframe API中所示），但是当我单击geoJSON点时，什么也没有发生。在浏览器的检查器中，我可以看到YT_id变量正在填充，但vidPopup却返回为：
X {b: Jb, a: null, h: null, closure_uid_691267473: 1, g: 1…}，看起来好像变量没有传递给它。

有谁知道我如何在iframe对象中获取视频的播放时间，或者如何在传单控制窗口中添加适当的YouTube iframe API？我想保留控制窗口而不是单独的html侧面板，以便在没有视频播放时可以看到地图-这似乎是最简单的方法。

最佳答案

我能够解决此问题，并成功使youtube-api播放器在传单控制窗口中打开。

将vidPlayer.onAdd函数更改为：

vidPlayer.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'vidPlayer');
    this._div.id = "player";
    this.update();
    return this._div;
};

具体来说，添加this._div.id = "player";。

然后我将onEachFeature函数更改为：

function onEachFeature(feature, layer) {
layer.on('click', function(e) {
    YT_id = feature.properties.youtube_id;
    vidSec = feature.properties.video_second;
    lat = feature.geometry.coordinates[1];
    lng = feature.geometry.coordinates[0];
    var marker;
    map.on('click', function (e) {
        if (marker) {
            map.removeLayer(marker);
        }
        player = new YT.Player('player', {
            height: '236.25',
            width: '420',
            videoId: YT_id,
            playerVars: {
                autoplay: 0,
                start: vidSec,
                rel: 0,
            },
            events: {
                'onReady': onPlayerReady,
            }
        });
        marker = new L.Marker([lat,lng]).addTo(map);
    });
    return YT_id;
    console.log(vidSec);
});
}
function onPlayerReady(event) {
    event.target.playVideo();
}

以防万一有人遇到这种情况试图做类似的事情。它工作时非常酷。

关于javascript - 有没有办法将YouTube API播放器添加到传单控制窗口？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44166313/