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

问题描述 投票：0回答：1

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

enter image description here

使用下面的代码，当我在浏览器中双击时，一个视频(Totoro.mp4)从1h23m45s开始弹出并在浏览器的中心位置播放。我希望视频能在我双击的位置（上图中 "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>
javascript jquery double-click
1个回答
1
投票

您可以通过设置 topleft 通过CSS。 类似这样。

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

脚本语言

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';
  });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.