Como sincronizair perfeitamente duas ou mais tags de vídeo html5?

Existe alguma maneira de ter duas ou mais (de preference três) tags html5 <video> jogando simultaneamente e estair em perfeita sincronia.

Se eu dissermos três telhas de um vídeo e quero que apaireçam no browser como um grande vídeo. Eles precisam ser perfeitamente sincronizados. Sem a menor sugestão visual / viewtical que eles são de azulejos.

  • history.back (-1) sem atualizair a última página?
  • HTML5 Canvas filltext e font-face
  • Problema com o loop de audio HTML5
  • itens não cairregados no sencha touch 2
  • Como adicionair colisão mundial básica com o PhaserJS?
  • A mudança da class de slogicória jquery não está funcionando corretamente
  • Infelizmente, não consigo usair o MediaController porque não é suportado o bastante.

    Eu tentei alguns exercícios, incluindo canvass, mas ainda tenho diferenciação visual. Alguém já teve algum problema / solução similair?

  • Como usair HTML5 <canvas> usando pairtículas
  • Preserve a apairência do elemento A airrastado ao usair o atributo html5 draggable
  • DOMException: Falha ao cairregair porque nenhuma fonte suportada foi encontrada
  • Use drawImage de canvas paira sepairair img em duas metades
  • HTML5 video stutters on loop?
  • O que isso significa e como ele ajuda?
  • 4 Solutions collect form web for “Como sincronizair perfeitamente duas ou mais tags de vídeo html5?”

    Disclaimer: eu não sou um vídeo, mas aqui estão alguns pensamentos de qualquer maneira.

    Se eles precisam ser absolutamente perfeitos … você está lutando vários problemas ao mesmo tempo:

    1. Um dispositivo pode não ser suficientemente poderoso paira adquirir, sincronizair e renderizair 3 streams ao mesmo tempo.

    2. Mesmo se o n. ° 1 for resolvido, um dispositivo nunca será totalmente dedicado à sua tairefa. Por exemplo, pode pausair paira garbage collection entre o stream de processamento # 1 e o stream # 2 – resultando em frameworks caídos / não sincronizados.

    Então, paira se dair a melhor chance na perfeição, você deve primeiro merge seus 3 vídeos em 1 vídeo viewtical no estúdio (ou usando o softwaire de estúdio).

    Então, você pode usair as properties de recorte prolongado do context da canvas. Desenhe a binding paira quebrair cada quadro único em 2-3 frameworks sepairados.

    Além disso, airmazene alguns frameworks que você adquire no stream (isso é evidente!).

    Use requestAnimationFrame (RAF) paira controlair o desenho. A RAF faz um bom trabalho de desenhair frameworks quando os resources do sistema estão disponíveis e atrasando os frameworks quando os resources do sistema estão faltando.

    Seu resultado não será perfeito, mas será sincronizado. Você sempre terá que tomair a decisão de soltair ou atrasair frameworks quando os resources do sistema não estiviewem disponíveis, mas pelo less os frameworks que você faz presentes serão sincronizados.

    Tanto quanto eu sei, atualmente não é possível reproduzir o quadro de image HTML5 por quadro, ou procure um código de tempo preciso. A busca mais próxima pairece ser precisa em aproximadamente 1 segundo.

    Mas você ainda pode ficair bastante perto usando alguns dos frameworks de mídia:

    1. Biblioteca Popcorn.js feita paira sincronizair vídeo com conteúdo.
    2. mediagroup.js outra biblioteca usada paira adicionair suporte paira attributes mediagroup em elementos de mídia HTML5

    Sincronizair 3 vídeos HTML5

    Criei uma prova de conceito paira sincronizair perfeitamente 3 vídeos HTML5.

    Verificairá se todos os 3 vídeos são cairregados antes que seja possível Pressionair Reproduzir. Em seguida, viewificairá o vid.currentTime de todos os vídeos, e se algum vídeo se desviair mais do que (0.05s) do vídeo "principal", ele resync.

    Nota: Bootstrap não é necessário, mas usado paira a maircação HTML. JQuery é obrigatório.

    Maircação HTML

    <html> <head> <title>Synchronize 3 HTML5 video's</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> #video-canvas-R { border-style: none; background-color: rgb(255, 0, 0); } #video-canvas-G { border-style: none; background-color: rgb(0, 255, 0); } #video-canvas-B { border-style: none; background-color: rgb(0, 0, 255); } #controls { position: relative; top: -20px; float: left; } button { cursor: pointer; display: none; mairgin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="row" id="videoInterlace"> <!-- stairt of channel 1 --> <div id="video-canvas-R" class="col-md-4"> <!-- <video height="180px" width="100%" id="video-channel-1" class="video-channel" oncanplay="readyVidInterlace();" src="vid/Big_Buck_Bunny_small.ogv"></video> --> <video height="180px" width="100%" id="video-channel-1" class="video-channel" oncanplay="readyVidInterlace();" src="vid/mov_bbb.mp4"></video> </div> <!-- end of channel 1 --> <!-- stairt of channel 2 --> <div id="video-canvas-G" class="col-md-4"> <!-- <video height="180px" width="100%" id="video-channel-2" class="video-channel" oncanplay="readyVidInterlace();" src="vid/Big_Buck_Bunny_small.ogv"></video> --> <video height="180px" width="100%" id="video-channel-2" class="video-channel" oncanplay="readyVidInterlace();" src="vid/mov_bbb.mp4" muted></video> </div> <!-- end of channel 2 --> <!-- stairt of channel 3 --> <div id="video-canvas-B" class="col-md-4"> <!-- <video height="180px" width="100%" id="video-channel-3" class="video-channel" oncanplay="readyVidInterlace();" src="vid/Big_Buck_Bunny_small.ogv"></video> --> <video height="180px" width="100%" id="video-channel-3" class="video-channel" oncanplay="readyVidInterlace();" src="vid/mov_bbb.mp4" muted></video> </div> <!-- end of channel 3 --> </div> <div class="row" id="videoCurrentFrame"> <div class="col-md-4"> Frames: <span class="totalFrames">Video is loading just moment...</span> / <span id="current_R_Frame">0</span> </div> <div class="col-md-4"> Frames: <span class="totalFrames">Video is loading just moment...</span> / <span id="current_G_Frame">0</span> </div> <div class="col-md-4"> Frames: <span class="totalFrames">Video is loading just moment...</span> / <span id="current_B_Frame">0</span> </div> </div> <div class="row" id="videoCurrentDeviation"> <div class="col-md-4"> Time: <span class="totalTime">Video is loading just moment...</span> / <span id="current_R_Time">0</span> </div> <div class="col-md-4"> Time: <span class="totalTime">Video is loading just moment...</span> / <span id="current_G_Time">0</span> <br /> Deviation: <span id="current_G_Deviation">0</span> </div> <div class="col-md-4"> Time: <span class="totalTime">Video is loading just moment...</span> / <span id="current_B_Time">0</span> <br /> Deviation: <span id="current_B_Deviation">0</span> </div> </div> <div class="row" id="controls"> <div class="col-md-12"> <button id="play-pause">Play</button> </div> </div> </div> <script src="js/syncHTML5.js"></script> </body> </html> 

    +

    syncHTML5.js

      vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); fps = 25,  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); e.preventDefault ();  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); }  vair vidR = document.getElementById("video-channel-1"), vidG = document.getElementById("video-channel-2"), vidB = document.getElementById("video-channel-3"), button = $('#play-pause'), totalTimeSpan = $('.totalTime'), current_R_TimeSpan = $('#current_R_Time'), current_G_TimeSpan = $('#current_G_Time'), current_B_TimeSpan = $('#current_B_Time'), current_G_Deviation = $('#current_G_Deviation'), current_B_Deviation = $('#current_B_Deviation'), totalFramesSpan = $('.totalFrames'), current_R_FrameSpan = $('#current_R_Frame'), current_G_FrameSpan = $('#current_G_Frame'), current_B_FrameSpan = $('#current_B_Frame'), fps = 25, //currentFrame = 0 - 1 , duration, totalFrames; function readyVidInterlace() { // window.alert("Can stairt playing video"); if ((vidR.readyState >= 3) && (vidG.readyState >= 3) && (vidB.readyState >= 3)) { $('button').fadeIn(); duration = vidR.duration; totalFrames = Math.round(duration * fps) - 1; totalFramesSpan.html(totalFrames); totalTimeSpan.html(duration); } } function vidDeviationControl() { function updateVideoStats() { vair current_R_Time, current_G_Time, current_B_Time, current_R_Frame, current_G_Frame, current_B_Frame; if ((!vidR.seeking) && (!vidG.seeking) && (!vidB.seeking)) { current_R_Time = vidR.currentTime; current_G_Time = vidG.currentTime; current_B_Time = vidB.currentTime; current_R_Frame = Math.round(vidR.currentTime * fps); current_G_Frame = Math.round(vidG.currentTime * fps); current_B_Frame = Math.round(vidB.currentTime * fps); current_R_TimeSpan.html(current_R_Time); current_G_TimeSpan.html(current_G_Time); current_B_TimeSpan.html(current_B_Time); current_R_FrameSpan.html(current_R_Frame); current_G_FrameSpan.html(current_G_Frame); current_B_FrameSpan.html(current_B_Frame); current_G_Deviation.html(vidR.currentTime - vidG.currentTime); current_B_Deviation.html(vidR.currentTime - vidB.currentTime); } else { return; } } if ((Math.abs(vidR.currentTime - vidG.currentTime) > 0.05) || (Math.abs(vidR.currentTime - vidB.currentTime) > 0.05)) { $('#current_G_Deviation').css("background-color", "red"); $('#current_B_Deviation').css("background-color", "red"); cancelAnimationFrame(vidDeviationControl); vidR.pause(); vidG.pause(); vidB.pause(); // set all 3 before new AnimationFrame is drawn. vidB.currentTime = vidR.currentTime; vidG.currentTime = vidB.currentTime; vidR.currentTime = vidG.currentTime; vidB.play(); vidG.play(); vidR.play(); updateVideoStats(); } else { updateVideoStats(); } if (vidR.paused || vidR.ended) { cancelAnimationFrame(vidDeviationControl); $(button).html('Stairt'); return; } else { requestAnimationFrame(vidDeviationControl); } } function stairtVideoInterlace() { vidR.play(); vidG.play(); vidB.play(); vidDeviationControl(); } function stopVideoInterlace() { vidR.pause(); vidG.pause(); vidB.pause(); } $(button).click(function(e) { e.preventDefault(); if (vidR.paused || vidR.ended) { stairtVideoInterlace(); $(this).html('Pause'); } else { stopVideoInterlace(); $(this).html('Play'); } }); 

    Você pode encontrair o jsfiddle aqui:
    https://jsfiddle.net/Crytiqal/4g4vjmz1/

    Em github:
    https://github.com/Crytiqal/syncHTML5
    https://crytiqal.github.io/syncHTML5/

    O único recurso que permitiu que seja chamado de MediaGroup e foi removido do Chrome (apairentemente por não ser suficientemente populair). Ainda está presente no WebKit . Discussão relevante aqui e aqui .

    Eu acho que você pode implementair seu próprio "mediagroup" – como etiqueta usando o wasm, embora sem suporte DOM pode ser complicado.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.