Field to Per Legend File URL in Player

Navigation
0

I'm working on a WebPlayer and I need to create a field where User can insert the URL of its caption, / em> of TRACK tag ...

I think of input but I do not know how to proceed in JS ...

I need an INPUT where you put the URL ... Script tag that takes this URL and injects the TRACK tag .

Current 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;
})();
    
asked by anonymous 04.12.2017 / 22:50

1 answer

1

Based on your code, I made some modifications.

  

Commented Code 

(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 );
    }
  });
})();
  

Minimized code 

(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)}})})()

References

06.12.2017 / 06:14
Manage versions android libraries Converting int to string