视频 Javascript, HTML5, 效果答案

【问题标题】：video Javascript, HTML5, efect视频 Javascript, HTML5, 效果
【发布时间】：2018-01-12 12:07:27
【问题描述】：

我目前正在做立体并排视频的处理，用户可以选择他想在他的视频上添加的效果（黑白，棕褐色，浮雕（还没有做））我添加了按钮例如正常和黑白，当我单击正常按钮时，我的视频显示得非常好，然后通过单击黑白按钮，我尝试产生黑白效果，但显示的结果是 N / b..正常 .... N / b ... 正常 ... N / b ... 正常，我看不出问题出在哪里，我需要帮助谢谢 :)

            <!DOCTYPE html>
            <meta charset=utf-8 />
            <script src="video.js" type="text/javascript"></script>
            <link href="video-js.css" rel="stylesheet" type="text/css">
            <title>Mon projet </title>

            <h1> <marquee>Streaming </marquee></h1>
            <center>

                <h1> Choisir effet </h1>


            <span id="cvsModeLbl">Mode:</span>

            <input type="button"  id="cvsbtnNormal" value="Normal" />
            <input type="button"  id="cvsbtnBW" value="Black &amp; White" />


            <h1> Vidéo Side by side</h1>
            <video id=v  controls loop width="500" height="400">

              <source src=video2.mp4 type=video/mp4>
                <source src=video2.webm type=video/webm>
                <source src=video2.ogg type=video/ogg>

            </video>


            <canvas id=c width="500" height= "400"></canvas>

            <style> c { background: black; } </style>



            <script>


                var v = document.getElementById('v');

                var canvas = document.getElementById('c');
                var context = canvas.getContext('2d');
                var back = document.createElement('canvas');
                var backcontext = back.getContext('2d');

                 var back1 = document.createElement('canvas');
                var backcontext1 = back1.getContext('2d');
                v.crossOrigin = 'anonymous';
                var cw,ch;

                    cw = v.width;
                    ch = v.height;
                    back.width=cw;
                    back.hight=ch;
                    back1.width=cw;
                    back1.height=ch;



            var effectNormal = document.getElementById("cvsbtnNormal");
            var effectBw = document.getElementById("cvsbtnBW");

            effectNormal.addEventListener("click", myFunction);
            effectBw.addEventListener("click", myFunction1);


             function myFunction(){
               context.clearRect(0,0,500,400);
                // First, draw it into the backing canvas
                context.drawImage(v,0,0,cw,ch);

              setTimeout(function(){ myFunction() }, 0);
            }


             function myFunction1(){

              context.clearRect(0,0,500,400);
                context.drawImage(v,0,0,cw,ch);
                // Grab the pixel data from the backing canvas
                var idata = context.getImageData(0,0,cw,ch);
                var data = idata.data;
                // Loop through the pixels, turning them grayscale
                    for(var i = 0; i < data.length; i+=4)
                    {
                        var r = data[i],
                            g = data[i+1],
                            b = data[i+2],
                            gray = (r+g+b)/3;
                        data[i] = gray;
                        data[i+1] = gray;
                        data[i+2] = gray;
                    }

                idata.data = data;
                // Draw the pixels onto the visible canvas
                context.putImageData(idata,0,0);
                // Start over!
                setTimeout(function(){  myFunction1(); }, 0); 
            }


            </script>

【问题讨论】：

英文请... meta.stackexchange.com/questions/13676/…
请阅读Is English required on stack overflow?（tl；博士：是的）。其他 SO 用户请注意：Do not translate this on behalf of the OP, if they can't ask the question in English, then they will struggle to respond to comments and answers.

标签： javascript html video

【解决方案1】：

var to1, to2;
function myFunction(){
    clearTimeout(to1)
    clearTimeout(to2)
    context.clearRect(0,0,500,400);
    // First, draw it into the backing canvas
    context.drawImage(v,0,0,cw,ch);

    to1 = setTimeout(function(){ myFunction() }, 10);
}


function myFunction1(){
    clearTimeout(to1)
    clearTimeout(to2)
    context.clearRect(0,0,500,400);
    context.drawImage(v,0,0,cw,ch);
    // Grab the pixel data from the backing canvas
    var idata = context.getImageData(0,0,cw,ch);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4)
    {
        var r = data[i],
        g = data[i+1],
        b = data[i+2],
        gray = (r+g+b)/3;
        data[i] = gray;
        data[i+1] = gray;
        data[i+2] = gray;
   }

   idata.data = data;
   // Draw the pixels onto the visible canvas
   context.putImageData(idata,0,0);
   // Start over!
   to2 = setTimeout(function(){  myFunction1(); }, 10); 
}

【讨论】：

j'ai essayé de le faire, toujours le meme effet
Je pense que c'est parce que il faut arrêter les timeouts, j'ai mis a jour ma reponse
Alors ca fonctionne?
oui ça fonctionne, par contre j'ai essayé avec votre fonction et celle cité en bas et j'ai le meme résultat qui veut dire que quand je clique sur le bouton normal il m'affiche bien puis des que je clique sur n/b ça devient un peu plus lent et plus je clique et plus ça se ralenti
Je ne suis pas sur de comprendre。 Qu'est ce que se ralenti？ J'ai prepare ce jsFiddle: link Tu vois le meme comportement que sur ton ordinateur?

【解决方案2】：

如果您第一次单击“正常”按钮，function() 将由于setTimeout() 而尽可能快且频繁地执行，并且无法停止。

如果您随后单击“黑白”按钮，function1() 也将由于setTimeout() 而尽可能快且频繁地执行，并且无法停止。

这两个函数在争夺 CPU 时间时以交替方式修改画布。

请考虑只使用 1 个“渲染循环”，以及使用停止按钮打破循环的方法。

不要使用setTimeout，而是考虑使用requestAnimationFrame 并按照此处所述检查视频时间：https://stackoverflow.com/a/17048103/3931225

【讨论】：