可以使用vanilla javascript制作一个跟随播放器的视区吗？

是的，可以使用vanilla JavaScript制作一个跟随播放器的视区。Vanilla JavaScript是指纯粹的JavaScript，不依赖于任何框架或库。下面是一个简单的实现示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #player {
      width: 640px;
      height: 360px;
      background-color: #000;
    }
    #viewport {
      width: 320px;
      height: 180px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid #fff;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <div id="viewport"></div>

  <script>
    // 获取播放器和视区的DOM元素
    const player = document.getElementById('player');
    const viewport = document.getElementById('viewport');

    // 监听播放器的滚动事件
    player.addEventListener('scroll', () => {
      // 获取播放器的滚动位置
      const playerRect = player.getBoundingClientRect();
      const playerTop = playerRect.top;
      const playerLeft = playerRect.left;

      // 设置视区的位置与播放器保持一致
      viewport.style.top = `${playerTop}px`;
      viewport.style.left = `${playerLeft}px`;
    });
  </script>
</body>
</html>

上述代码中，我们创建了一个播放器和一个视区的div元素，并使用CSS样式进行布局。通过监听播放器的滚动事件，获取播放器的滚动位置，并将视区的位置设置为与播放器保持一致。这样，视区就会跟随播放器的滚动而移动。

这是一个简单的示例，实际应用中可能需要根据具体需求进行更复杂的实现。如果需要更多功能，可以考虑使用现有的视频播放器库或自定义开发。

腾讯云相关产品和产品介绍链接地址：