canvas播放视频

本文转载自查看原文 2021-01-14 22:41 687

思路

通过监听video的play事件，不断的获取最新的video视频帧数据，然后将最新的视频帧通过drawImage绘制到canvas中。同样的思路，可以通过navigator.getUserMedia获取摄像头数据，然后通过canvas绘制出来，或者通过websocket/webrtc等方法传输给服务器或者其它客户端就可以实现视频聊天。

代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video play in canvas</title>
    <style>
        #video {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    <video id="video" src="movie.mp4" controls></video>
    <br/>
    <button id="play-button">play</button>
    <button id="pause-button">pause</button>
　　 <br/>
    <canvas id="canvas" width="600" height="400"></canvas>
</div>
<script>
    var video = document.getElementById('video');
    var playButton = document.getElementById('play-button');
    var pauseButton = document.getElementById('pause-button');
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    playButton.onclick = function () {
        video.play();
    };

    pauseButton.onclick = function () {
        video.pause();
    };

    video.addEventListener('play', playCallBack);

    function playCallBack() {
        if(video.paused || video.ended) {
            return;
        }

        captureFrame();
        setTimeout(playCallBack, 0);
    }

    function captureFrame() {
        context.drawImage(video, 0, 0, 600, 400);
    }

</script>
</body>
</html>

　　效果如下：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 使用canvas来实时播放RTSP视频用Canvas做视频拼图播放视频有沙沙的杂音怎么处理？ flowplayer视频播放插件 Android视频播放之VideoView JS控制视频的播放使用ckplayer播放视频 flutter 播放视频组件 polyv视频播放 Vitamio视频播放