Question

我正在制作包含geoJSON图层的传单地图。单击geoJSON图层上的某个点时，在该点中标识的YouTube视频（通过＆＃34; youtube_id＆＃34;字段）将在传单控制窗口中打开。我真的希望能够获得视频的播放时间，似乎唯一的方法就是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侧面板，因此在没有播放视频时可以看到地图 - 这似乎是最简单的方式。

Answer 1

我能够解决这个问题并成功让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();
}

以防万一其他人试图做同样的事情。它工作时非常酷。

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

1 个答案: