[Leaflet] Showing video files

날짜:



웹페이지의 비디오

 - HTML Element의 video 태그를 사용할 수 있을때까지 웹페이지에서 비디오는 어려운 작업이었다.
 - 요즘에는 다음과 같은 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>
view raw Leaflet-Showing_Video_Files_00.html hosted with ❤ by GitHub

 - 이 비디오는 다음과 같이 보여진다.

 - 만약 웹페이지에서 이와같이 보여줄 수 있다면 Leaflet에서 map 안에 보여줄 수 있다.
 - 여기서 비디오를 map과 (fit)크기나 사이즈가 맞게 준비되는 것이 중요하다.
 - 비디오는 지도와 같이 북향 방향으로 되어있어야 하며, 비율은 map과 (fit)맞아야 한다.
 - 그렇지 않으면 이상하게 보일 것이다.



이미지 오버레이의 경계

<!DOCTYPE html>
<html>
<head>
<title>Video Overlay Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html, body { height: 100%; margin: 0; }
#map { width: 600px; height: 400px; }
</style>
</head>
<body>
<div id='map'></div>
<script>
/**
* 우선, Leaflet map을 만들고 일반적인 방법인 L.TileLayer로 배경을 추가한다.
*/
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
/**
* 그 다음 비디오가 (위치)커버할 지리적 경계를 정의한다.
* L.LatLngBounds 를 사용하여 사각형 모양 인스턴스를 생성한다.
* (https://leafletjs.com/reference-1.7.1.html#latlngbounds)
*/
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
/**
* LatLngBounds가 커버한 지역을 보기위해서 L.Rectangle을 사용한다.
* (https://leafletjs.com/reference-1.7.1.html#rectangle)
*/
L.rectangle(bounds).addTo(map);
map.fitBounds(bounds);
</script>
</body>
</html>
view raw Leaflet-Showing_Video_Files_01.html hosted with ❤ by GitHub



비디오 오버레이 추가

<!DOCTYPE html>
<html>
<head>
<title>Video Overlay Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html, body { height: 100%; margin: 0; }
#map { width: 600px; height: 400px; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
/**
* 비디오 오버레이를 추가하는 것과 이미지 오버레이를 추가하는 것과 유사하다.
*
* 이미지 오버레이는 하나의 이미지에 대해서 다음과 같이 L.ImageOverlay를 사용하면 된다.
* - var overlay = L.imageOverlay( imageUrl, bounds, options );
*
* 비디오 오버레이는 아래의 코드와 같이 작업한다.
* - L.imageOverlay 대신 L.videoOverlay 사용
* - image URL 대신에 video URL
*
* PS.
* 비디오 오버레이는 다른 Leaflet 레이어처럼 작동한다.
* 추가/삭제를 할 수 있으며, 여러개의 비디오중에 선택하여 layers control을 사용할 수 있다.
* (https://1004lucifer.blogspot.com/2020/10/leaflet-layer-groups-and-layers-control.html)
*/
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 overlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.8,
interactive: true
});
map.fitBounds(bounds);
map.addLayer(overlay);
</script>
</body>
</html>
view raw Leaflet-Showing_Video_Files_02.html hosted with ❤ by GitHub



비디오에 대한 간단한 조작

<!DOCTYPE html>
<html>
<head>
<title>Video Overlay Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html, body { height: 100%; margin: 0; }
#map { width: 600px; height: 400px; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
],
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
map.fitBounds(bounds);
var overlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.8,
interactive: false,
autoplay: false
});
map.addLayer(overlay);
/**
* API 문서 확인 시 L.VideoOverlay 클래스에 play()/pause() 메소드가 없음을 알 수 있다.
*
* 이런경우 video overlay의 getElement() 메소드를 유용하게 사용할 수 있다.
* (HTMLMediaElement를 상속한) HTMLVideoElement를 리턴받아 play()/pause()와 같은 메소드를 사용할 수 있다.
* HTMLMediaElement: https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement
* HTMLVideoElement: https://developer.mozilla.org/ko/docs/Web/API/HTMLVideoElement
*
* 이를통해서 커스텀 인터페이스를 제작할 수 있다.
* 예를들어 video overlay가 한번 로드되면 play/pause할 수 있는 L.Control의 서브클래스를 만들 수 있다.
* (아래 코드의 MyPauseControl 클래스)
*/
overlay.on('load', function () {
var MyPauseControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏸';
L.DomEvent.on(button, 'click', function () {
overlay.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 () {
overlay.getElement().play();
});
return button;
}
});
var pauseControl = (new MyPauseControl()).addTo(map);
var playControl = (new MyPlayControl()).addTo(map);
});
</script>
</body>
</html>
view raw Leaflet-Showing_Video_Files_03.html hosted with ❤ by GitHub




참고: https://leafletjs.com/examples/video-overlay/


댓글

댓글 쓰기