mudando a fonte na tag de vídeo html5

Eu estou tentando construir um player de vídeo, que funciona em todos os lugares. até agora eu estaria indo com:

 

(como visto em vários sites, por exemplo, vídeo para todo mundo ) até agora, tudo bem.

mas agora eu também quero algum tipo de lista de reprodução / menu junto com o player de vídeo, a partir do qual eu posso selecionar outros vídeos. aqueles devem ser abertos dentro do meu player imediatamente. então eu terei que “mudar dinamicamente a fonte do vídeo” (como visto em dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ – seção “Vamos ver outro filme “) com javascript. vamos esquecer a parte do flashplayer (e, portanto, do IE) por enquanto, vou tentar lidar com isso mais tarde.

então meu JS para mudar as tags deve ser algo como:

  function loadAnotherVideo() { var video = document.getElementsByTagName('video')[0]; var sources = video.getElementsByTagName('source'); sources[0].src = 'video2.mp4'; sources[1].src = 'video2.ogv'; video.load(); }  

O problema é que isso não funciona em todos os navegadores. ou seja, firefox = O, há uma boa página, onde você pode observar o problema que estou tendo: http://www.w3.org/2010/05/video/mediaevents.html

Assim que eu acionar o método load () (no Firefox, lembre-se), o player de vídeo morre.

agora eu descobri que quando eu não uso várias tags , mas apenas um atributo src dentro da tag , a coisa toda funciona no firefox.

então meu plano é usar esse atributo src e determinar o arquivo apropriado usando a function canPlayType () .

estou fazendo errado de alguma forma ou complicando as coisas?

Eu odiava todas essas respostas porque elas eram muito curtas ou dependiam de outras estruturas.

Aqui está um “baunilha JS maneira de fazer isso, trabalhando no Chrome, por favor, teste em outros navegadores:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

  

JS:

 var video = document.getElementById('video'); var source = document.createElement('source'); source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4'); video.appendChild(source); video.play(); setTimeout(function() { video.pause(); source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); video.load(); video.play(); }, 3000); 

Modernizr funcionou como um encanto para mim.

O que eu fiz foi que eu não usei . De alguma forma isso estragou tudo, já que o vídeo só funcionava na primeira vez que load () era chamado. Em vez disso, usei o atributo de origem dentro da tag de vídeo -> e usei o Modernizr para determinar qual formato o navegador suportava.

  

Espero que isso ajude você 🙂

Se você não quiser usar Modernizr , você sempre pode usar CanPlayType () .

Seu plano original parece bom para mim. Você provavelmente encontrará mais peculiaridades do navegador lidando com o gerenciamento dynamic dos elementos , conforme indicado aqui pela nota de especificação W3:

Modificar dinamicamente um elemento de origem e seu atributo quando o elemento já estiver inserido em um elemento de vídeo ou áudio não terá efeito. Para alterar o que está sendo reproduzido, basta usar o atributo src no elemento de mídia diretamente, possivelmente usando o método canPlayType () para escolher entre os resources disponíveis. Geralmente, manipular os elementos de origem manualmente após o documento ter sido analisado é uma abordagem desnecessariamente complicada.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

Eu resolvi isso com este método simples

 function changeSource(url) { var video = document.getElementById('video'); video.src = url; video.play(); } 

Em vez de fazer com que o mesmo player de vídeo carregue novos arquivos, por que não apagar todo o elemento e recriá-lo. A maioria dos navegadores irá carregá-lo automaticamente se os src estiverem corretos.

Exemplo (usando Protótipo ):

 var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' }); var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' }); vid.update(src); src.insert({ before: new Element('source', { 'src': 'https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag/video.mp4', 'type': 'video/mp4' }) }); $('container_div').update(vid); 

De acordo com a especificação

Modificar dinamicamente um elemento de origem e seu atributo quando o elemento já estiver inserido em um elemento de vídeo ou áudio não terá efeito. Para alterar o que está sendo reproduzido, basta usar o atributo src no elemento de mídia diretamente, possivelmente usando o método canPlayType () para escolher entre os resources disponíveis. Geralmente, manipular os elementos de origem manualmente após o documento ter sido analisado é uma abordagem desnecessariamente complicada.

Então, o que você está tentando fazer aparentemente não deve funcionar.

Yaur: Embora o que você tenha copiado e colado seja um bom conselho, isso não significa que é impossível alterar elegantemente o elemento de origem de um elemento de vídeo HTML5, mesmo no IE9 (ou no IE8) (esta solução NÃO envolve substituindo todo o elemento de vídeo, pois é uma prática de codificação incorreta).

Uma solução completa para trocar / trocar vídeos em tags de vídeo HTML5 via javascript pode ser encontrada aqui e testada em todos os navegadores HTML5 (Firefox, Chrome, Safari, IE9, etc).

Se isso ajudar, ou se você estiver com problemas, por favor me avise.

Basta colocar uma div e atualizar o conteúdo …

   

Eu venho com isso para mudar a fonte de vídeo dinamicamente. O evento “canplay” em algum momento não é triggersdo no Firefox, então eu adicionei “loadedmetadata”. Também faço uma pausa no vídeo anterior se houver um …

 var loadVideo = function(movieUrl) { console.log('loadVideo()'); $videoLoading.show(); var isReady = function (event) { console.log('video.isReady(event)', event.type); video.removeEventListener('canplay', isReady); video.removeEventListener('loadedmetadata', isReady); $videoLoading.hide(); video.currentTime = 0; video.play(); }, whenPaused = function() { console.log('video.whenPaused()'); video.removeEventListener('pause', whenPaused); video.addEventListener('canplay', isReady, false); video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event... video.src = movieUrl; // Change actual source }; if (video.src && !video.paused) { video.addEventListener('pause', whenPaused, false); video.pause(); } else whenPaused(); }; 

Esta é minha solução:

  

Usando as tags provou-se difícil para mim no Chrome 14.0.835.202 especificamente, embora funcionou bem para mim no FireFox. (Esse pode ser meu desconhecimento, mas achei que uma solução alternativa poderia ser útil de qualquer maneira.) Então, acabei usando apenas uma tag e definindo o atributo src diretamente na própria tag de vídeo. A function canPlayVideo('') foi usada para determinar se o navegador específico poderia ou não reproduzir o vídeo de input. O seguinte funciona no FireFox e no Chrome.

Incidentalmente, tanto o FireFox quanto o Chrome estão jogando no formato “ogg”, embora o Chrome recomende “webm”. Eu coloquei o cheque de suporte ao navegador de “ogg” primeiro apenas porque outros posts mencionaram que o FireFox prefere a fonte ogg primeiro (isto é, ). Mas, eu não testei (e duvido muito) se a ordem no código faz alguma diferença ao definir o “src” na tag de vídeo.

HTML

    

JavaScript

 function setupVideo() { // You will probably get your video name differently var videoName = "http://video-js.zencoder.com/oceans-clip.mp4"; // Get all of the uri's we support var indexOfExtension = videoName.lastIndexOf("."); //window.alert("found index of extension " + indexOfExtension); var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension); //window.alert("extension is " + extension); var ogguri = encodeURI(videoName.replace(extension, ".ogv")); var webmuri = encodeURI(videoName.replace(extension, ".webm")); var mp4uri = encodeURI(videoName.replace(extension, ".mp4")); //window.alert(" URI is " + webmuri); // Get the video element var v = document.getElementById("media"); window.alert(" media is " + v); // Test for support if (v.canPlayType("video/ogg")) { v.setAttribute("src", ogguri); //window.alert("can play ogg"); } else if (v.canPlayType("video/webm")) { v.setAttribute("src", webmuri); //window.alert("can play webm"); } else if (v.canPlayType("video/mp4")) { v.setAttribute("src", mp4uri); //window.alert("can play mp4"); } else { window.alert("Can't play anything"); } v.load(); v.play(); } 

Eu tenho pesquisado isso há um bom tempo e estou tentando fazer a mesma coisa, então espero que isso ajude alguém. Eu tenho usado crossbrowsertesting.com e literalmente testando isso em quase todos os navegadores conhecidos pelo homem. A solução que tenho atualmente funciona no Opera, no Chrome, no Firefox 3.5+, no IE8 +, no iPhone 3GS, no iPhone 4, no iPhone 4s, no iPhone 5, no iPhone 5s, no iPad 1+, no Android 2.3+, no Windows Phone 8.

Mudando dinamicamente as fonts

Alterar dinamicamente o vídeo é muito difícil, e se você quiser um fallback em Flash, terá que remover o vídeo da página DOM / e adicioná-lo novamente para que o Flash seja atualizado, pois o Flash não reconhecerá atualizações dinâmicas para Flash vars. Se você for usar o JavaScript para alterá-lo dinamicamente, eu removerei completamente todos os elementos e apenas usarei canPlayType para definir o src em JavaScript e break ou return após o primeiro tipo de vídeo suportado e não se esqueça de atualizar dinamicamente o flash var mp4. Além disso, alguns navegadores não registram que você alterou a fonte, a menos que você chame video.load() . Eu acredito que o problema com .load() você estava experimentando pode ser corrigido chamando video.pause() . Remover e adicionar elementos de vídeo pode retardar o navegador porque continua armazenando em buffer o vídeo removido, mas há uma solução alternativa .

Suporte entre navegadores

No que diz respeito à parte do cross-browser, cheguei ao Video For Everybody também. Eu já tentei o plugin MediaelementJS WordPress, que acabou por causar muito mais problemas do que resolvidos. Eu suspeito que os problemas foram devido ao plug-in WordPress e não a biblioteca realmente. Estou tentando encontrar algo que funcione sem JavaScript, se possível. Até agora, o que eu tenho é um HTML simples:

  

Notas importantes :

  • Acabou colocando o ogg como o primeiro porque o Mac OS Firefox encerra a tentativa de reproduzir o vídeo se encontrar um MP4 como o primeiro .
  • Os tipos MIME corretos são arquivos .ogv importantes que devem ser video/ogg , não video/ogv
  • Se você tem vídeo HD, o melhor transcodificador que eu encontrei para arquivos OGG com qualidade HD é o Firefogg
  • O arquivo .iphone.mp4 é para iPhone 4+, que reproduz somente vídeos MPEG-4 com áudio H.264 Baseline 3 e áudio AAC. O melhor transcodificador que encontrei para esse formato é o Handbrake, usar a predefinição iPhone e iPod Touch funcionará no iPhone 4+, mas para que o iPhone 3GS funcione, é necessário usar a predefinição do iPod com resolução muito menor que adicionei como video.iphone3g.mp4 .
  • No futuro, poderemos usar um atributo de media nos elementos para segmentar dispositivos móveis com consultas de mídia, mas, no momento, os dispositivos Apple e Android mais antigos não oferecem suporte suficiente.

Editar :

  • Ainda estou usando o Video For Everybody, mas agora mudei para o FlowPlayer, para controlar o fallback do Flash, que tem uma API JavaScript incrível que pode ser usada para controlá-lo.

Tente mover a fonte OGG para o topo. Eu notei que o Firefox às vezes fica confuso e pára o player quando o que ele quer tocar, OGG, não é o primeiro.

Vale a pena tentar.

Eu tenho um aplicativo da web semelhante e não estou enfrentando esse tipo de problema. O que eu faço é algo assim:

 var sources = new Array(); sources[0] = /path/to/file.mp4 sources[1] = /path/to/another/file.ogg etc.. 

então quando eu quero mudar as fonts eu tenho uma function que faz algo parecido com isto:

 this.loadTrack = function(track){ var mediaSource = document.getElementsByTagName('source')[0]; mediaSource.src = sources[track]; var player = document.getElementsByTagName('video')[0]; player.load(); } 

Eu faço isso para que o usuário possa fazer o seu caminho através de uma lista de reprodução, mas você pode verificar se há userAgent e, em seguida, carregar o arquivo apropriado dessa maneira. Eu tentei usar várias tags de origem, como todos na internet sugeriram, mas achei muito mais limpo e muito mais confiável para manipular o atributo src de uma única tag de origem. O código acima foi escrito da memory, então talvez eu tenha passado por alguns detalhes, mas a idéia geral é alterar dinamicamente o atributo src da tag de origem usando javascript, quando apropriado.