跳到主要内容
版本：9.0.0

加载实时视频

在地图上加载实时视频，支持hls视频流和flv视频流。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>加载实时视频</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.0.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>

    var map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.6231110792369, 31.29393790264095], 
        zoom: 17, 
        pitch:60,
        userId: '***', // 授权码  
    });

    map.on('load', function () {

        // 添加二维平面视频
        map.addOnlineVideo({
            id: 'test',  // 与图层id类似，需要唯一
            type: 'hls', // hls实时视频流类型
            coordinates: [    // 角点坐标数组：从视频左上角开始，顺时针；4326坐标
                [120.621, 31.295],
                [120.623, 31.295],
                [120.623, 31.293],
                [120.621, 31.293],
            ],
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'  // hls视频url
        });

        // 添加立体平面视频
        map.addOnlineVideo({
            id: 'test-3d',  // 与图层 id 类似，需要唯一
            type: 'flv', //  flv 实时视频流类型
            coordinates: [    // 角点坐标数组：从视频左上角开始，顺时针；4326 坐标
                [120.621, 31.296, 100],
                [120.623, 31.296, 100],
                [120.623, 31.296, 0],
                [120.621, 31.296, 0],
            ],
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flv 视频 url
        });

        // 添加立体平面视频添加羽化效果
        map.addOnlineVideo({
            id: 'test-3d-mask',  // 与图层 id 类似，需要唯一
            type: 'flv', //  flv 实时视频流类型
            coordinates: [    // 角点坐标数组：从视频左上角开始，顺时针；4326 坐标
                [120.624, 31.294, 100],
                [120.626, 31.294, 100],
                [120.626, 31.294, 0],
                [120.624, 31.294, 0],
            ],
            mask: "../example_data/images/mask.png",
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flv 视频 url
        });

        map.on('click', function () {
            // 移除视频
            map.removeLayer('test-3d')
        })
    })

</script>
</body>
</html>