mle 0900 - izudon/izudon.github.io GitHub Wiki

0900 Add a video

ソースの追加

'video': {
    'type': 'video',
    'urls': [
        'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
        'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
    ],
    'coordinates': [
        [-122.51596391201019, 37.56238816766053],
        [-122.51467645168304, 37.56410183312965],
        [-122.51309394836426, 37.563391708549425],
        [-122.51423120498657, 37.56161849366671]
    ]
}
  • 動画は type: video。
  • URL は、ブラウザの対応状況等があるので配列で複数指定できる（先に書いたものが優先）。
  • coordinates: は、四隅の経緯度（のはず）。

Leaflet では地図の回転という概念がなかったから、
経緯度は左上と右下を指定するだけで良かった。

レイヤの追加

{
    'id': 'video',
    'type': 'raster',
    'source': 'video'
}
  • 動画や画像は type: "raster" となる。

再生と停止

map.on('click', () => {
    playingVideo = !playingVideo;

    if (playingVideo) map.getSource('video').play();
    else map.getSource('video').pause();
});
  • 再生と停止をする仕組みは放っておいても追加してくれないから手動で追加する。
  • ソースオブジェクトに .play() で再生、.pause() で（一時）停止。