skip to Main Content

I am building a chrome extension. I would like two of the same video side by side (similar to picture-in-picture) Kinda like this. I want to duplicate the video in a separate iframe/video element.

I don’t know how to duplicate or clone the video. I would like a completely brand new object (not just a reference).

This is an example of the video element.

<video src="blob:https://www.netflix.com/1ca080d6-e257-414f-bef8-d34975b6325c" tabindex="-1" style="height: 100%; width: 702.4px;"></video>


I tried cloneNode() without any luck. I get this error:
GET blob… net::ERR_FILE_NOT_FOUND

I tried manually creating a video element and setting src to https://www.netflix.com/1ca080d6-e257-414f-bef8-d34975b6325c

I tried HTMLVideoElement.requestPictureInPicture() but it doesn’t create a new video. The main video window goes black and a mini video window opens.

This does not answer my question because it does not explain how to duplicate an element that has a blob as a source. What is a blob URL and why it is used?



How can this be done?

2

Answers


  1. Taking advantage of captureStream() we can take the output of one player and feed it into another…

    <!DOCTYPE html>
    <head>
    </head>
    
    <body onload="V1.src=Url; RecordVideo();">
    
    <script type="text/javascript">
    
    var Url='SomeVideo.mp4'; // <--- Set your video source
    
    function RecordVideo(){
    
    V1.onplay = function(){
    
     let Stream=V1.captureStream(); V2.srcObject=Stream; V2.play();
    
    };
    
    }
    </script>
    
    <video id="V1" src="" type="video/mp4" width="320" height="240" controls></video>
    
    <video id="V2" src="" type="video/mp4" width="320" height="240" controls></video>
    
    </body>
    </html>
    

    I’ll let you figure out the "other iframe" part which I didn’t understand.

    Login or Signup to reply.
  2. You can use cloneNode() to create a duplicate of the node

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
        </head>
        <body>
            <video
                src="./example.mp4"
                tabindex="-1"
                id="video-1"
                controls
                style="height: 100%; width: 702.4px"></video>
        </body>
    
        <script>
            const videoOne = document.querySelector('#video-1');
            const videoTwo = videoOne.cloneNode(true);
    
            document.body.append(videoTwo);
        </script>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search