Html Question posted in
Some basic documentation can be found here.

Html – Clone a video with blob in JS

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?

Tags:

2

Answers


  1. 0

    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. 0

    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