Copy <video> with its respective attributes

Question

I have an HTML5 player using the tag <video>, only that I have the video (which is streamed via DASH protocol) to be loaded to the tag using a bookstore javascript. I need to have exactly the same video in a popup that the user can open, and here comes the problem: if I load the video using the above bookstore, past two, three openings the page can no longer open the videos, so I thought of copying the HTML from ` already processed, which would prevent further use of the bookstore. I upload the video like this:

var url = videoOut + 'videorecording/' + videoguid + '/manifest.mpd';
var player = dashjs.MediaPlayer().create();
var videoPlayer = document.querySelector('#videoPlayerPopUp');
player.initialize(videoPlayer, url, false);

I have this code(1) to try to copy the player above without having to use the bookstore again:

var playerHTML =document.getElementById("hero-unit").innerHTML;
document.getElementById("videoPaste").innerHTML = playerHTML;

within the hero-unit i have this HTML:

<video width="380px" height="288px" id="videoPlayer" controls="" preload="auto" src="blob:http://localhost/25ac2810-36ef-452c-844b-cad58a2773cf"></video>

I thought the above JS code(1) would copy exactly that, but what I have on videoPastethis is it:

<video width="380px" height="288px" id="videoPlayer" controls="" preload="auto"></video>

It’s because the video has to be uploaded through the bookstore or I’m copying it wrong?

Answer 1

The copy of the HTML element is correct, but unfortunately you will not be able to play the stream in MPEG-DASH format directly by tag video HTML5. In this case, Dash.js is downloading the stream segments, performing demuxing and delegating each stream (audio, video) to the video tag via MSE (Media Source Extensions).

Thus, you will actually need a player who can play the stream in MPEG-DASH format also in your pop-up. In addition to the dash.js, you can also check the HTML5 player than Bitmovin offers. Besides MPEG-DASH, this player can play streams in several other formats (such as HLS, Smooth Streaming and other files like Webm, TS, MP4, etc).

Answer 2

What you can also do is take each attribute of your existing tag and apply it to the new one. This small implementation can help:

var video = document.getElementById("hero-unit").children, // Tag de vídeo existente
    newVideo = document.createElement('video'); // Novo elemento de vídeo para clonar

document.getElementById('videoPaste').appendChild(newVideo); // 'Append' nova tag de video no elemento pai

for(var attr of video[0].attributes){
	document.getElementById('videoPaste').children[0].setAttribute(attr.name, attr.value); // Seta cada attributo de 'video' em 'newVideo'
}

<div id="hero-unit">
	<video width="380px" height="288px" id="videoPlayer" controls="" preload="auto" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"></video>
</div>

<div id="videoPaste"></div>

If you want to run the code in Jsfiddle, follow the link: https://jsfiddle.net/GustavoMarmentini/7t1xmqsy/3/