使用 Canvas 在地图上播放视频

源代码编辑器

复制

运行

还原

          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>使用 Canvas 在地图上播放视频</title>
  <style type="text/css">
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .container,
    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="container">
    <video id="video" muted style="display: none;"></video>
    <div id="map"></div>
    <div style="position:absolute; bottom: 21px; right: 21px">
      <button id="stop">停止播放</button>
      <button id="start">继续播放</button>
    </div>
  </div>
  <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
  <script type="text/javascript">
    let map = new AMap.Map('map', {
      center: [116.33719, 39.942384],
      zoom: 16,
    });
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d')
    let layer = new AMap.CanvasLayer({
      canvas,
      bounds: [116.327911, 39.939229, 116.342659, 39.946275]
    });
    map.addLayer(layer);
    let video = document.getElementById('video');
    video.setAttribute('crossorigin', 'anonymous');
    video.src = 'https://a.amap.com/jsapi/static/demo/third-user-demo/test.mp4'
    video.load();
    video.addEventListener('canplaythrough', () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      video.play()
      render()
    })
    let frame = null;
    function render() {
      frame = window.requestAnimationFrame(render);
      context.clearRect(0, 0, canvas.width, canvas.height)
      context?.drawImage(video, 0, 0, canvas.width, canvas.height)  //绘制视频
      layer.reFresh();
    }
    document.getElementById('start').addEventListener('click', () => {
      video.play();
      render();
    })
    document.getElementById('stop').addEventListener('click', () => {
      window.cancelAnimationFrame(frame);
      video.pause();
    })
  </script>
</body>

</html>
        

控制台

清空

示例
中心常见
问题智能
客服