有没有办法将 YouTube API 播放器添加到传单控件 window？

Question

我正在制作包含 geoJSON 图层的传单地图。单击 geoJSON 层上的某个点时，在该点（由 "youtube_id" 字段）标识的 YouTube 视频将在传单控件 window 中打开。我真的很想获得视频的播放时间，似乎唯一的方法就是 YouTube iframe API, using their playback status functions.

我现在使用地图的方式是将 iframe 对象添加到传单控件 window，类似于 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);

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

来轻松完成此操作

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 添加到传单控件 window？ 我想保留控件 window 而不是单独的 html 侧面板，以便在没有视频播放时可以看到地图 -- 这似乎是最简单的方法。

Answer 1

我能够解决这个问题并成功地让 youtube-api 播放器在传单控件中打开 window。

将 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();
}

以防万一其他人遇到这个试图做类似的事情。运行起来很爽

有没有办法将 YouTube API 播放器添加到传单控件 window？

Is there a way to add a YouTube API player to leaflet control window?

javascript

iframe

youtube-api

leaflet

youtube-iframe-api