0

Estou trabalhando em um WebPlayer e preciso criar um campo onde o User possa inserir a URL de sua legenda e a mesma vá pará no SRC da tag TRACK...

Penso em input mas não sei como prosseguir no JS...

Preciso de um INPUT onde ponha a URL... Script que pegue essa URL e injete na tag TRACK.

Atual script:

var LEGENDA = "LINKDOINPUT";

(function() {
    'use strict';
    var URLactual = window.location;
    GM_setClipboard(URLactual);
    var html = "<video controls><source src='" + URLactual + "'><track src='" + LEGENDA + "' kind='subtitles' srclang='en' label='LEGENDA' default></video><a  download='VIDEO' target='_blank' href='"+URLactual+"'>Download VIDEO</a><form action=''>Link em .VTT:<input name='firstname' type='text'><br><br><input type='submit'></form>"
    document.documentElement.innerHTML = html;
})();
1
  • 1
    Inclua na pergunta o código que vc já tem.
    – Sam
    Commented 4/12/2017 às 22:53

1 Resposta 1

1

Com base no seu código, fiz algumas modificações.

Código comentado

(function() {
  'use strict';
  const URLactual = window.location;
  GM_setClipboard(URLactual);

  const TEMPLATE = '<video controls>' +
        '<source src="' + URLactual + '">' +
        '</video>' +
        '<a download="VIDEO" target="_blank" href="'+URLactual+'">Download VIDEO</a>' +
        '<form>' +
        // Definido um id para o input
        'Link em .VTT:<input id="legenda" type="text"><br><br>' +
        // Alterado para tipo button e definido id
        '<input id="btn_inserir" type="button" value="INSERIR LEGENDA">' +
        '</form>';
  // Imprime no corpo do documento
  document.body.innerHTML = TEMPLATE;

  const BTN_INSERIR = document.querySelector('#btn_inserir');
  const VIDEO = document.querySelector('video');

  // Adiciona o evento Click no botão
  BTN_INSERIR.addEventListener('click', function(e) {
    const TRACKS = document.querySelectorAll('track');
    const LEGENDA = document.querySelector('#legenda');
    const TEMPLATE_TRACK = '<track src="' + LEGENDA.value + '" kind="subtitles" srclang="en" label="LEGENDA" default>';
    // Verifica se foi adicionado a legenda
    if (TRACKS.length > 0) {
      // Caso já tenha adicionado uma legenda, apenas atualiza
      // o endereço conforme o valor do input
      TRACKS[0].src = LEGENDA.value;
    } else {
      // Caso não tenha, adiciona com o valor passado no input
      VIDEO.insertAdjacentHTML( 'beforeend', TEMPLATE_TRACK );
    }
  });
})();

Código minificado

(function(){'use strict';const URLactual=window.location;GM_setClipboard(URLactual);const TEMPLATE='<video controls><source src="'+URLactual+'"></video><a download="VIDEO" target="_blank" href="'+URLactual+'">Download VIDEO</a><form>Link em .VTT:<input id="legenda" type="text"><br><br><input id="btn_inserir" type="button" value="INSERIR LEGENDA"></form>';document.body.innerHTML=TEMPLATE;const BTN_INSERIR=document.querySelector('#btn_inserir');const VIDEO=document.querySelector('video');BTN_INSERIR.addEventListener('click',function(e){const TRACKS=document.querySelectorAll('track');const LEGENDA=document.querySelector('#legenda');const TEMPLATE_TRACK='<track src="'+LEGENDA.value+'" kind="subtitles" srclang="en" label="LEGENDA" default>';if(TRACKS.length>0){TRACKS[0].src=LEGENDA.value}else{VIDEO.insertAdjacentHTML('beforeend',TEMPLATE_TRACK)}})})()

Referências

1
  • Funcionou perfeitamente obrigado... Commented 6/12/2017 às 18:16

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 .