Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/09/2016, 05:58
MiguelNajdorf
 
Fecha de Ingreso: septiembre-2009
Mensajes: 39
Antigüedad: 14 años, 8 meses
Puntos: 0
Modificar Script de Subtitulos

Hola gente, quiero modificar un script que muestra subtitulos srt en videos que estan dentro de la etiqueta video, el tema está en que logicamente muestra un solo subtitulo, y yo quisiera que muestre 2 a la vez, los subtitulos tal como dije son archivos srt y en el html se ve un formulario con el listado de idiomas dentro de labels de tipo radio, por lo cual le cambie el tipo y le puse que sea checkbox, ahora si bien permite elegir mas de uno, me muestra solo el primer checkbox que encuentre con el checked activado.

El script está conformado por 2 archivos: uno que es el que se encarga de traer el srt, y el otro de incrustarlo dentro del html, he probado de mil formas y no me sale que se muestren 2 subtitulos elegidos, les dejo los JS aqui debajo a ver si me pueden dar una mano, gracias.

video_subtitles.js
Código:
var submanager = {
	video: null,
	init: function(videoElt, subElement) {
		this.video = videoElt;
		this._conductor.subElt = subElement;

    var self = this;
    this.video.addEventListener("timeupdate", function() {
      if (self.video.paused || self.video.ended) {
        return;
      }
      self._conductor.update(self.video.currentTime);
    }, false);


	},
	setSubtitles: function(srtURL) {
		this._compileSubtitle(srtURL);
	},


  _compileSubtitle: function(srtURL) {
    var xhr = new XMLHttpRequest();

    this._conductor.flush();
    var self = this;
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        subSource = xhr.responseText;
        subSource = subSource.split("\n");
        self._parseSubtitles(subSource); 
      }
    }
    xhr.open("GET", srtURL, true); 
    xhr.send(null);
  },

  _parseSubtitles: function(srt) {
    var l = 0;

    function eatTheMess(srt, l) {
      while (true) {
        var currentLine = srt[l];
        if (currentLine.indexOf(" --> ") == -1 || currentLine[0] == "#") {
          l++;
          if (l >= srt.length)
            break;
        } else {
          break;
        }
      }
      return l;
    }
    function getTimeCodes(srt, l, t1, t2) {
      function str2seconds(str) {
        var s = str.split(':');
        s[3] = s[2].split(',')[1];
        s[2] = s[2].split(',')[0];
        return (parseInt(s[2], 10) + s[0] * 3600 + s[1] * 60 + s[3] / 1000);
      }
      var currentLine = srt[l];

      var i = currentLine.indexOf(" --> ");
      var t1AsStr = currentLine.substring(0, i);
      var t2AsStr = currentLine.substring(i + 5);
      t1.value = str2seconds(t1AsStr);
      t2.value = str2seconds(t2AsStr);
    }
    function getText(srt, l, text) {
      text.value = srt[l];
    }

    var subTitles = [];
    while (true) {
      var t1 = {};
      var t2 = {};
      var text = {};

      l = eatTheMess(srt, l);
      if (l >= srt.length)
        break;
      getTimeCodes(srt, l, t1, t2);
      l++;
      getText(srt, l, text);
      subTitles.push({t1: t1.value, t2: t2.value, txt: text.value});
      l++;

      if (l >= srt.length) {
        break;
      }
    }
    for (var i in subTitles)
      this._conductor.pool.push(subTitles[i]);
    return;
  },

	_conductor: {
		currentAction: null,
		pool: [],
		displaySubtitle: function(str) {
			this.subElt.innerHTML = str;
			this.subElt.style.visibility = "visible";
		},
		hideSubtitle: function() {
			this.subElt.style.visibility = "hidden";
		},
		flush: function(t) {
			this.hideSubtitle();
			this.currentAction = null;
			this.pool = [];
		},
		update: function(t) {
			if (this.pool.length == 0) return;

			for (var i in this.pool) {
				var a = this.pool[i];
				if (this.currentAction && t >= this.pool[this.currentAction].t2)
					this.hideSubtitle();

				if (t >= a.t1 && t < a.t2) {
					if (this.currentAction != i) {
						this.currentAction = i;
						this.displaySubtitle(a.txt);
					} else {break;}
				}
			}
		}
	}
}
main.js
Código:
var processor = {
  video: null,

  compileArgs: function() {
    var en = document.getElementById("en").checked;
    var es = document.getElementById("es").checked;
    var fr = document.getElementById("fr").checked;
    var src = en ? "srt/en.srt" : es ? "srt/es.srt" : "srt/fr.srt";
    this.video.setAttribute("subtitles", src);
    document.getElementById("source").setAttribute("href", src);
  },

  doLoad: function() {
    var args = document.getElementById("args");
		
		var self = this;
    args.addEventListener("click", function() {
			self.compileArgs();
			submanager.setSubtitles(video.getAttribute("subtitles"));
    }, true);

    var video = document.getElementById("video");
		this.video = video;

		this.compileArgs();

		var subElt = document.getElementById("subtitle");
		submanager.init(video, subElt);
		submanager.setSubtitles(video.getAttribute("subtitles"));
  }
};