官方解析

这里，官方首先告诉我们，当<video>这个标签还没出现的时候，在web上展示视频是很艰巨的。现在有了这个标签，只需要如下代码就能在web页面上展示视频：


<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>

想在Leaflet上放视频，先得加载一个地图


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

随后画一个放视频的矩形，放到地图上


var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
L.rectangle(bounds).addTo(map);
map.fitBounds(bounds);

使用videoOverlay函数把视频放到刚刚画的矩形上！


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

加一个播放和停止按钮

videoOverlay并没有提供play()和pause()的API。

需要调用getElement()，然后才能调用play()以及pause()


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>
	
	<title>video</title>
 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
 
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
	</style>
 
	
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
 
 
	
   var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 4,
		maxZoom: 7
	}).setView([32, 118], 7);
 
 
 
	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
 
	map.addLayer(ign);
 
	map.invalidateSize(true);
	
 
	//添加的数据
	/*
	var popup = L.popup();
	function onMapClick(e){
		
		popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map);
	}
	map.on('click', onMapClick);
	*/
	
	bounds = L.latLngBounds([[35.083, 111.467], [31.419, 120.344]]);
	L.rectangle(bounds).addTo(map);
	map.fitBounds(bounds);
	
	var videoUrls = [
		'https://vfx.mtime.cn/Videohttps://cdn.jxasp.com:9143/image/2019/01/15/mp4/190115161611510728_480.mp4'
	];
	var overlay = L.videoOverlay(videoUrls, bounds, {
		opacity: 0.8,
		interactive: false,
		autoplay: true
	});
	map.addLayer(overlay);
	
		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>

关键词搜索

Leaflet文档阅读笔记- Showing video files解析

详情内容

官方解析

博主例子

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式