4.11.3_视频处理

来源：互联网发布：安卓锁机软件制作教程编辑：程序博客网时间：2024/06/05 15:51
4.11.3_视频处理

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>视频处理</title>        <style>            body{                background: #ddd;            }            .floatingControls{                position: absolute;                left: 75px;                top: 300px;            }            #canvas{                background: #fff;                border: thin solid #aaa;            }            #video{                display: none;            }        </style>    </head>    <body>        <video id="video" controls>            <source src="video/mov_bbb.mp4"></source>            <source src="video/mov_bbb.ogg"></source>        </video>        <canvas id="canvas" width="480" height="270"></canvas>        <div id="controls" class="floatingControls">            <input id="controlButton" type="button" value="播放" />            <input id="colorCheckbox" type="checkbox" checked="" />彩色图片            <input id="flipCheckbox" type="checkbox" />180度翻转        </div>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        //离屏canvas        var offscreenCanvas = document.createElement('canvas');        var offscreenContext = offscreenCanvas.getContext('2d');        var video = document.getElementById('video');        var controlButton = document.getElementById('controlButton');        var flipCheckbox = document.getElementById('flipCheckbox');        var colorCheckbox = document.getElementById('colorCheckbox');        var imageData;        //视频下载时或者用户点击播放前显示的图像        var poster = new Image();        //初始化        poster.src = 'img/waterfall.jpg';        offscreenCanvas.width = canvas.width;        offscreenCanvas.height = canvas.height;        poster.onload = function(){            context.drawImage(poster,0,0);        };        //事件        controlButton.onclick = function(){            if(controlButton.value === '播放'){                startPlaying();                controlButton.value = '暂停';            }else{                stopPlaying();                controlButton.value = '播放';            }        }        //函数        //开始播放        function startPlaying(){            video.play();            //请求帧动画，每播一帧的时间执行一次，大概根据浏览器的重绘速率来执行            requestAnimationFrame(nextVideoFrame);        }        //暂停播放        function stopPlaying(){            video.pause();        }        //在绘制每帧时进行画面处理        function nextVideoFrame(){            if(video.ended){ //视频播放完毕后                controlButton.value = '播放';            }else{ //视频播放过程中处理每帧将会绘制在canvas中的图像                offscreenContext.drawImage(video,0,0,offscreenCanvas.width,offscreenCanvas.height);                if(!colorCheckbox.checked){ //执行每帧黑白处理                    removeColor();                }                if(flipCheckbox.checked){ //执行翻转180度效果                    drawFlipped();                }else{ //不执行特殊效果                    context.drawImage(offscreenCanvas,0,0);                }                requestAnimationFrame(nextVideoFrame);            }        }        //每帧黑白处理        function removeColor(){            var imageData;            var length;            var data;            var average;            imageData = offscreenContext.getImageData(0,0,offscreenCanvas.width,offscreenCanvas.height);            data = imageData.data;            length = data.length;            for(var i=0 ; i<length;i+=4){                average = (data[i]+data[i+1]+data[i+2])/3;                data[i] = data[i+1] = data[i+2] = average;            }            offscreenContext.putImageData(imageData,0,0);        }        //翻转180度效果        function drawFlipped(){            context.save();            context.translate(canvas.width/2,canvas.height/2);            context.rotate(Math.PI);            context.translate(-canvas.width/2,-canvas.height/2);            context.drawImage(offscreenCanvas,0,0);            context.restore();        }    </script></html>
0 0