canvas绘制动态视频并且在视频上加上自定义logo

实现的效果:可以在画布上播放动态视频,并且加上自定义的图片logo放在视频的右下角

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>绘制视频</title>
    </head>
    <body>
        <div>绘制视频</div>
        <canvas id="myCanvas" width="500" height="350"></canvas>
        <button id="player" style="display: block">暂停/播放</button>

        <script>
            // 获取画布
            const canvas = document.getElementById('myCanvas')
            // 获取画笔
            const ctx = canvas.getContext('2d')
            // 获取视频
            // const video = document.querySelector('video')
            const video = document.createElement('video')
            video.src = './assets/video.mp4'
            const logo = new Image()
            logo.src = './assets/ball.png'

            // 获取按钮
            const btn = document.querySelector('#player')
            btn.onclick = () => {
                // 判断视频是否在播放
                if (video.paused) {
                    video.play()
                } else {
                    video.pause()
                }
                renderVideo()
            }
            // 绘制视频
            const renderVideo = () => {
                // 绘制视频
                ctx.drawImage(video, 0, 0, 500, 350)
                // 还可以继续绘制一个logo
                // ctx.drawImage(logo, 460, 320, 40, 30)
                requestAnimationFrame(renderVideo)
            }
        </script>
    </body>
</html>
相关推荐
MediaTea37 分钟前
Pr 视频过渡:沉浸式视频 - VR 色度泄漏
音视频·vr
LNTON羚通1 小时前
算法定制LiteAIServer摄像机实时接入分析平台烟火检测算法的主要功能
音视频·视频监控
EasyCVR6 小时前
EHOME视频平台EasyCVR视频融合平台使用OBS进行RTMP推流,WebRTC播放出现抖动、卡顿如何解决?
人工智能·算法·ffmpeg·音视频·webrtc·监控视频接入
冷凝女子8 小时前
【QT】海康视频及openCv抓拍正脸接口
qt·opencv·音视频·海康
安步当歌9 小时前
【WebRTC】视频编码链路中各个类的简单分析——VideoStreamEncoder
音视频·webrtc·视频编解码·video-codec
顾北川_野10 小时前
Android CALL关于电话音频和紧急电话设置和获取
android·音视频
顶呱呱程序10 小时前
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
算法·matlab·音视频·matlab-gui·音频滤波·脉冲响应不变法
EasyCVR11 小时前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台(ISUP)接入EasyCVR不在线如何排查?
运维·服务器·网络·人工智能·ffmpeg·音视频
runing_an_min11 小时前
ffmpeg 视频滤镜:屏蔽边框杂色- fillborders
ffmpeg·音视频·fillborders
我喜欢就喜欢1 天前
基于qt vs下的视频播放
开发语言·qt·音视频