CODEWITHSUNDEEP
javascriptjquerydouble-click
Rio
Rio

Reputation: 59

To playback a video at a specific (spatial) position

Would it be possible to playback a video at a specific (spatial) position in browser?

enter image description here

With the following code, a video (Totoro.mp4) is popped-up and playbacked from 1h23m45s at the center position of browser when I double-click in the browser. I would like the video to be at the position where I double click (the position right after "333" in the above image. 111,...,555 in the image are samples of contents.). Is there any idea to realize that?

My code:

<!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>

Upvotes: 0

Views: 147

Answers (1)

Brad
Brad

Reputation: 163242

You can set the position by setting the top/left via CSS. Something like this:

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

Upvotes: 1

Related Questions