Leaflet can help you display videos somewhere on the map.
Leaflet は、マップ上のどこかのビデオを表示する支援をします。
Video on webpages
ウェブページのビデオ
Video used to be a hard task when building a webpage, until the <video> HTML element was made available.
ビデオは、<video%gt; HTML エレメントが利用されるようになるまで、ウェブページを構築するときかつては困難な仕事でした。
Nowadays, we can use the following HTML code:
今日、次の HTML コードを使用できます：
<video width="500" controls> <source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm"> <source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4"> </video>
このビデオを表示：
（訳注：これは画像です）
If a video can be shown in a webpage in this way, then Leaflet can display it inside a map. It is important that the videos are prepared in such a way that they will fit the map: The video should have a “north-up” orientation, and its proportions should fit the map. If not, it will look out of place.
もし、ビデオがこの方法でウェブページに表示できるなら、Leaflet は、マップ内にそれを表示できます。マップにぴったりはめ込むような方法でビデオが準備されることは重要です：ビデオは「北上」方向を保持し、その形状はマップに合わなければなりません。そうでなければ、不適当に見えます。
Bounds of an image overlay
First of all, create a Leaflet map and add a background L.TileLayer in the usual way:
まず最初に、Leaflet マップを作成し、通常の方法で背景の L.TileLayer を追加します：
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
id: 'mapbox.satellite',
attribution: ...
}).addTo(map);
それから、ビデオが覆う地理的境界を定義します。これは L.LatLngBounds インスタンスで、長方形です：
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
もし、LatLngBounds によって覆われた地域を確認したいのなら、L.Rectangle を使用します：
L.rectangle(bounds).addTo(map); map.fitBounds(bounds);
Adding the video overlay
Adding a video overlay works very similar to adding a image overlay. For just one image, L.ImageOverlays is used like this:
ビデオオーバレイを追加することは、イメージオーバレイを追加することにとても似ている作業です。ただ一つのイメージには、L.ImageOverlays はこのように使用されます：
var overlay = L.imageOverlay( imageUrl, bounds, options );
ビデオオーバレイには、ただ：
● Use L.videoOverlay instead of L.imageOverlay
● Instead of the image URL, specify one video URL or an array of video URLs
● L.imageOverlay の代わりに L.videoOverlay を使用
● イメージ URL の代わりに、一つのビデオ URL、または、ビデオ URLs の配列を指定
var videoUrls = [ 'https://www.mapbox.com/bites/00188/patricia_nasa.webm', 'https://www.mapbox.com/bites/00188/patricia_nasa.mp4' ];
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
var videoOverlay = L.videoOverlay( videoUrls, bounds, {
opacity: 0.8
}).addTo(map);
そしてこのように、マップ上のビデオを得られます：
Video overlays behave like any other Leaflet layer - you can add and remove them, let the user select from several videos using a layers control, etc.
ビデオオーバレイは、他の Leaflet レイヤのように動作します - それらの追加と削除ができ、ユーザにレイヤコントロールを使用していくつかのビデオから選択させる、などです。
A bit of control over the video
If you read the API documentation, you’ll notice that the L.VideoOverlay class does not have a play() or pause() method.
もし、API ドキュメントを読むなら、L.VideoOverlay クラスは play() または pause() メソッドがないことに注意してください。
For this, the getElement() method of the video overlay is useful. It returns the HTMLVideoElement (which inherits from HTMLMediaElement) for the overlay - and that has methods like play() and pause(), e.g.
このため、ビデオオーバレイの getElement() メソッドは便利です。それはオーバレイに（HTMLMediaElement から継承する）HTMLVideoElement を返します - そして、例えば play() と pause() のようなメッソドを持ちます。
videoOverlay.getElement().pause();
これは、カスタムインターフェイスを構築することを許可します。例えば、ロードするとこのビデオを 再生/一時停止 するために L.Control の小さいサブクラスを構築できます：
videoOverlay.on('load', function () {
var MyPauseControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏸';
L.DomEvent.on(button, 'click', function () {
videoOverlay.getElement().pause();
});
return button;
}
});
var MyPlayControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏵';
L.DomEvent.on(button, 'click', function () {
videoOverlay.getElement().play();
});
return button;
}
});
var pauseControl = (new MyPauseControl()).addTo(map); var playControl = (new MyPlayControl()).addTo(map); });
コード全体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<link rel="stylesheet" href="./leaflet13/leaflet.css" /> <script src="./leaflet13/leaflet.js"></script>
<title>Showing video files</title> </head> <body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
//Bounds of an image overlay
var map = L.map('map').setView([37.8, -96], 4);
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble'
}).addTo(map);
//Adding the video overlay var videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
//L.rectangle(bounds).addTo(map);
map.fitBounds(bounds);
//Adding the video overlay
var videoOverlay = L.videoOverlay( videoUrls, bounds, {
opacity: 0.8
}).addTo(map);
videoOverlay.on('load', function () {
var MyPauseControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏸';
L.DomEvent.on(button, 'click', function () {
videoOverlay.getElement().pause();
});
return button;
}
});
var MyPlayControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏵';
L.DomEvent.on(button, 'click', function () {
videoOverlay.getElement().play();
});
return button;
}
});
var pauseControl = (new MyPauseControl()).addTo(map);
var playControl = (new MyPlayControl()).addTo(map);
});
</script> </body> </html>
