Copy video with its attributes

Question

Copy video with its attributes

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have an HTML5 player using the <video> tag, but I have the video (which is transmitted via DASH protocol) to be loaded into 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 bookstore above, past two, three apertures the page can no longer open the videos, so I thought in copying the HTML of the '' already processed, which would avoid any further use of the bookstore. I load 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 above player without having to use the bookstore again:

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

Within 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 just that, but what I have in videoPaste is this:

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

Is it because the video has to be uploaded through the bookstore or am I copying poorly?

javascript html5 html5-video

asked by anonymous 14.12.2017 / 12:27

2 answers

Disable Validators.Required Angular2 What is the purpose of the meta description and how do you use it? [duplicate]

score 1 · 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 the video tag in HTML5. In this case dash.js is downloading stream segments, performing demuxing and delegating each stream (audio, video) to the video tag via MSE ( Media Source Extensions ).

So you really need a player that can play the stream in MPEG-DASH format also in your pop-up. In addition to dash.js , you can also check out the HTML5 player that Bitmovin offers. In addition to MPEG-DASH, this player can play streams in several other formats (like HLS, Smooth Streaming and other files like Webm, TS, MP4, etc.).

score 0 · Answer 2

What you can do is also take each attribute of your existing tag and apply it to the new one. This little 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><divid="videoPaste"></div>

If you want to run the code in JSFiddle, follow the link: link