有沒有辦法將YouTube API播放器添加到傳單控制窗口？

我正在製作包含geoJSON圖層的傳單地圖。點擊geoJSON圖層上的某個點時，該點中標識的YouTube視頻（通過「youtube_id」字段）將在小冊子控制窗口中打開。我真的希望能夠獲得視頻的播放時間，並且似乎唯一的方法就是使用，使用它們的playback status functions。有沒有辦法將YouTube API播放器添加到傳單控制窗口？

我現在的地圖工作方式是將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);

我想我應該能夠很容易地通過在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添加到傳單控制窗口？我想保留控制窗口而不是單獨的html側面板，以便在未播放視頻時可以看到地圖 - 這似乎是最簡單的方法。

來源

2017-05-24 Bird

我能夠解決這個問題，併成功地獲得了在傳單控制窗口中打開的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";。萬一別人運行過這個試圖做類似的事情

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

：

然後，我改變了onEachFeature功能。它工作時非常酷。

來源

2017-06-15 23:11:35 Bird

有沒有辦法將YouTube API播放器添加到傳單控制窗口？

回答

相關問題