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>
相关推荐
浮华落定7 小时前
DeepSeek+即梦 做AI视频
人工智能·chatgpt·音视频
Black蜡笔小新12 小时前
从中心化到点对点:视频通话SDK组件EasyRTC如何通过WebP2P技术实现低延迟通信
网络协议·音视频·p2p
清月电子17 小时前
BT401双模音频蓝牙模块如何开启ble的透传,有什么注意事项
单片机·嵌入式硬件·物联网·音视频
深圳市青牛科技实业有限公司17 小时前
芯麦 GC1808:高性能、低成本的立体声音频模数转换器
人工智能·嵌入式硬件·算法·音视频·能源·新能源·电动工具
cuijiecheng201817 小时前
音视频入门基础:RTP专题(9)——FFmpeg接收RTP流的原理和内部实现
ffmpeg·音视频
京河小蚁18 小时前
微信云开发小程序音频播放踩坑记录 - 从熄屏播放到iOS静音
微信·小程序·音视频
9527华安18 小时前
FPGA实现SDI视频解码转GTY光口传输,基于GS2971+Aurora 8b/10b编解码架构,提供工程源码和技术支持
fpga开发·架构·音视频·8b/10b·sdi·gty·gs2971
shawn·xiao18 小时前
Android:播放Rtsp视频流的两种方式
android·音视频·视频
忘不了情20 小时前
前端如何播放二进制音频数据
javascript·react.js·音视频
lucky-billy1 天前
Qt 中使用 ffmpeg 获取采集卡数据录制视频
qt·ffmpeg·音视频