在特定（空间）位置播放视频

Question

是否可以在浏览器中的特定（空间）位置播放视频？

使用以下代码，当我在浏览器中双击时，在浏览器中心位置从1h23m45s 弹出并播放视频（Totoro.mp4）。我希望视频位于我双击的位置（上图中“333”之后的位置。图像中的 111,...,555 是内容示例。）。有什么想法可以实现吗？

我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"></script>
    </head>
    <body>
        111<p>
        222<p>
        333<p>
        444<p>
        555<p>
    </body>
        <script>
            document.querySelector('body').addEventListener('dblclick', function (e) {
                lity  ('C:/Users/user/Videos/Totoro.mp4#t=01h23m45s');
            });
        </script>
</html>

Answer 1

您可以通过CSS设置top/left来设置位置。像这样：

HTML

<video src="https://archive.org/download/BigBuckBunny_328/BigBuckBunny.ogv" controls></video>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS

video {
  display: none;
  position: fixed;
}

JavaScript

document.addEventListener('DOMContentLoaded', (e) => {
    document.querySelector('ul').addEventListener('dblclick', (e) => {
    const video = document.querySelector('video');
    video.style.display = 'block';
    video.style.left = e.clientX + 'px';
    video.style.top = e.clientY + 'px';
  });
});

在特定（空间）位置播放视频

To playback a video at a specific (spatial) position

javascript

jquery

double-click

HTML

CSS

JavaScript