Estaba traduciendo un capítulo y me he cansado de buscar la posición de la conversación a mano cada dos o tres frases, así que he hecho un pequeño userscript para añadir el vídeo en la página y mover la reproducción pinchando en los tiempos.
Lo he probado en Firefox (mp4) y Chrome (mp4 y mkv) usando Violentmonkey y va genial. Lo dejo aquí por si alguien lo quiere utilizar o editar a su gusto.
Saludos.
Control+espacio pausa/reanuda el vídeo, control+coma aumenta el tamaño y control+punto lo reduce.
Código: Seleccionar todo
// ==UserScript==
// @name Subtitulamos
// @namespace Violentmonkey Scripts
// @match https://www.subtitulamos.tv/subtitles/*/translate
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// ==/UserScript==
// SRT to WebVTT by Silvia Pfeiffer - https://silviapfeiffer.github.io
function srt2vtt(b){b=b.replace(/\r+/g,'');b=b.replace(/^\s+|\s+$/g,'');b=b.split('\n\n');var f='';if(0<b.length){f+='WEBVTT\n\n';for(var g=0;g<b.length;g+=1){var e='';for(var a=b[g].split(/\n/);3<a.length;){for(var c=3;c<a.length;c++)a[2]+='\n'+a[c];a.splice(3,a.length-3)}c=0;!a[0].match(/\d+:\d+:\d+/)&&a[1].match(/\d+:\d+:\d+/)&&(e+=a[0].match(/\w+/)+'\n',c+=1);if(a[c].match(/\d+:\d+:\d+/)){var d=a[1].match(/(\d+):(\d+):(\d+)(?:,(\d+))?\s*--?>\s*(\d+):(\d+):(\d+)(?:,(\d+))?/);d?(e+=d[1]+':'+d[2]+':'+d[3]+'.'+d[4]+' --\x3e '+d[5]+':'+d[6]+':'+d[7]+'.'+d[8]+'\n',c+=1,a[c]&&(e+=a[c]+'\n\n')):e=''}else e='';f+=e}}return f}
// create and append vbox
var vbox = document.createElement('div')
vbox.id = 'vbox'
vbox.style.display = 'none'
vbox.innerHTML = '<video controls><track default></video>'
var vid = vbox.children[0]
var sub = vid.children[0]
var vbTo = document.createElement('i')
vbTo.id = 'vbTo'
vbTo.className = 'fa fa-chevron-down'
document.getElementById('translation-tools').appendChild(vbox).parentElement.appendChild(vbTo)
// get subtitle id
GM_xmlhttpRequest({
method: 'GET',
url: document.getElementById('episode-title').children[0].href,
onload: function(req) {
var subId = /href="\/subtitles\/(\d+)\/translate"/.exec(req.responseText)[1]
// load subtitle
GM_xmlhttpRequest({
method: 'GET',
url: 'https://www.subtitulamos.tv/subtitles/'+subId+'/download',
onload: function(req) {
var subData = srt2vtt(req.responseText)
var subUrl = URL.createObjectURL(new Blob([subData], {type : 'text/vtt'}))
sub.src = subUrl
}
})// load subtitle
}
})
// load video
function loadVideo(vidFile) { vid.src = URL.createObjectURL(vidFile) }
// open video
function playPause() { (vid.paused) ? vid.play() : vid.pause() }
vbox.onclick = function(ev) {
if (ev.target == this) {
var input = document.createElement('input')
input.type = 'file'
input.onchange = function(ev) { loadVideo(ev.target.files[0]) }
input.click()
} else playPause()
}
// drop video
vbox.ondragover = function(ev) { ev.preventDefault() }
vbox.ondrop = function(ev) {
ev.preventDefault()
loadVideo(ev.dataTransfer.items[0].getAsFile())
}
// video onload
vid.oncanplay = function() { vid.style.zIndex = 1 }
vid.onerror = function() { vid.style.zIndex = -1 }
// show/hide vbox
function showVbox() {
vbox.style.display = 'inline-block'
vbTo.className = 'fa fa-chevron-up'
}
function hideVbox() {
vbox.style.display = 'none'
vbTo.className = 'fa fa-chevron-down'
vid.pause()
}
vbTo.onclick = function(ev) {
ev.stopPropagation()
if (vbox.style.display == 'none') showVbox()
else hideVbox()
}
// seek video
document.getElementById('sequences').addEventListener('click', function(ev) {
var hsm = '', path = []
if (ev.path) path = ev.path // chrome fix removed el
else { // rest
var el = ev.target
while (el != this) { path.push(el); el = el.parentElement }
}
for (var i=0,ii=path.length; i<ii; i++) {
if (path[i].classList.contains('time')) {
if (path[i].tagName == 'PRE') hsm = path[i].innerText // chrome fix removed el
else hsm = path[i].children[0].innerText || path[i].children[0].value
break
} else if (path[i] == this) break
}
// calc sec and seek
if (hsm) {
var hmsList = hsm.split('.')[0].split(':'), s = 0, v = 1
while (hmsList.length) {
s += hmsList.pop() * v
v *= 60
}
vid.currentTime = s
vid.play()
showVbox()
}
})
// keyboard
document.addEventListener('keyup', function(ev) {
if (ev.ctrlKey) {
switch (ev.code) {
case 'Space': playPause(); break
case 'Comma': vid.style.width = vid.offsetWidth + 50 + 'px'; break
case 'Period': vid.style.width = vid.offsetWidth - 50 + 'px'; break
}
}
})
GM_addStyle(`
#vbox {
float: right;
position: relative;
top: -15px;
font-size: 0;
background-color: inherit;
}
#vbox::before {
content: 'Abre o arrastra vídeo';
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5%;
border: 3px #777 dashed;
border-radius: 20px;
font-family: 'Open Sans', arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #777;
align-items: center;
justify-content: center;
cursor: pointer;
}
#vbox > video {
position: relative;
width: 25vw;
max-width: 50vw;
min-width: 300px;
z-index: -1;
}
#vbox > video::cue {
position: relative;
bottom: 20px;
font-family: 'Open Sans', arial, sans-serif;
font-size: 16px;
text-shadow: 2px 2px 2px black;
color: white;
background: none;
}
#vbTo {
visibility: visible;
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 16px 12px;
font-size: 18px;
color: white;
opacity: .5;
cursor: pointer;
z-index: 2;
}
.time > div {
cursor: pointer;
}
`)
Una explicación para tontos, ¿porfi?
Perfecto!
