0

Eu tenho um player HTML5 usando a tag <video>, só que tenho o vídeo (que é transmitido via protocolo DASH) a ser carregado para a tag usando uma livraria javascript. Eu preciso de ter exatamente o mesmo vídeo num popup que o utilizador pode abrir, e aí vem o problema: se eu carregar o vídeo usando a livraria acima, passado duas, três aberturas a página já não consegue abrir mais os vídeos, então eu pensei em copiar o HTML do ´` já processado, o que evitaria mais uma utilização da livraria. Carrego o vídeo assim:

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

Tenho este código(1) para tentar copiar o player acima sem ter de usar a livraria novamente:

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

dentro do hero-unit eu tenho este HTML:

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

Pensava que o código(1) JS acima ia copiar exatamente isso, mas o que eu tenho no videoPasteé isto:

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

É por causa do vídeo ter de ser carregado através da livraria ou eu estou a copiar mal?

3
  • dê uma olhadinha nesta pergunta e suas respectivas respostas: pt.stackoverflow.com/q/4321/3082 com certeza vai te ajudar Commented 14/12/2017 às 11:31
  • @PauloRoberto obtenho exatamente o mesmo resultado usando o clone
    – ihavenokia
    Commented 14/12/2017 às 11:37
  • Consegue colocar um exemplo rodando aqui na sua pergunta ou no jsfiddle.net ? seria ideal para que o pessoal possa realizar tentativas Commented 14/12/2017 às 12:43

2 Respostas 2

1

A cópia do elemento HTML está correta, mas infelizmente você não vai conseguir reproduzir o stream em formato MPEG-DASH diretamente pela tag video do HTML5. No caso, o dash.js é que está fazendo download dos segmentos do stream, realizando o demuxing e delegando cada stream (audio, video) para a tag video através do MSE (Media Source Extensions).

Sendo assim, você vai de fato precisar de um player que consiga reproduzir o stream em formato MPEG-DASH também no seu pop-up. Além do dash.js, você pode conferir também o player HTML5 que a Bitmovin oferece. Além de MPEG-DASH, este player consegue reproduzir streams em diversos outros formatos (como HLS, Smooth Streaming e outros arquivos como Webm, TS, MP4, etc).

1
  • tem razão, eu acabei por alterar o método de stream e estou usando o Wowza player, e consegui fazer aquilo que tinha em mente sem ter de clonar/copiar, simplesmente inicio um novo player, algo que com este dash.js era impossível
    – ihavenokia
    Commented 5/01/2018 às 15:57
0

O que você pode fazer também é pegar cada atributo da sua tag existente e aplicar na nova. Essa pequena implementação pode ajuda:

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>

Se quiser executar o código no JSFiddle, segue o link: https://jsfiddle.net/GustavoMarmentini/7t1xmqsy/3/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .