Field for by subtitle file URL in Player

Question

I’m working on a Webplayer and I need to create a field where the User can insert the URL of its legend and the same goes to the SRC of tag track...

Think about input but I don’t know how to proceed in the JS...

I need a INPUT where do you put the URL... Script to take this URL and Research in the tag track.

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

Answer 1

Based on your code, I’ve 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 );
    }
  });
})();

Minified 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

• insertAdjacentHTML
• addeventlistener
• querySelector
• querySelectorAll
• What are the advantages and disadvantages of minifying JS scripts?