4.11.3_视频处理

最新推荐文章于 2024-04-04 15:10:42 发布

信封中的阳光

最新推荐文章于 2024-04-04 15:10:42 发布

阅读量226

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71724014

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
4.11.3_视频处理

4.11.3_视频处理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>视频处理</title> <style> body{ background: #ddd; } .fl
复制链接

扫一扫

专栏目录