canvas绘制video

主要思路：

Canvas中可以使用ctx.drawImage(video, x, y,width,height)来对视频当前帧的图像进行绘制，其中video参数就是HTML5中的video标签。故我们可以通过Canvas的动态效果不断获取video当前画面，渲染到Canvas画布上。并且通过改变video标签的属性，来实现在Canvas中处理视频的一整套效果。可以理解成在Canvas中新建一个播放器，该播放器视频源是video标签创建，播放器的各种方法最终指向对video标签本身属性和方法的改变。而利用Canvas的强大功能，可以进一步进行图像处理、弹幕加载等操作。

html

<div class="videoBox"><img id="poster" src="http://120.77.35.150/video/video-bg.png" alt=""><video id="video"preload="auto"playsinline="true"x-webkit-airplay="true"webkit-playsinline="true"x5-video-player-type="h5"x-video-orientation="h5"x5-video-player-fullscreen="true"muted="false"src="http://120.77.35.150/video/2.mp4"></video><canvas id="canvas"></canvas><div id="btn">点击</div>
</div>

js

<script>const video = document.getElementById('video');const palyBtn = document.getElementById('btn');const canvas = document.getElementById('canvas');const poster = document.getElementById('poster') // 初始化(创建)canvasconst ctx = canvas.getContext('2d')// 获取可视宽高const screen_W = window.innerWidth || document.body.clientWidthconst screen_H = window.innerHeight || document.body.clientHeight// 设置画布宽高（画布宽高，最好是根据设计视频所做实际宽高）canvas.width = screen_W * 3 // 获取屏幕宽度作为canvas的宽度 这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）canvas.height = screen_H * 3 + 12// 绘制视频palyBtn.addEventListener('touchstart', function (e) {e.preventDefault()poster.style.display = 'none'// 绘制背景ctx.fillStyle = '#000'ctx.fillRect(0, 0, canvas.width, canvas.height)ctx.drawImage(video, 0, 0, canvas.width, canvas.height);if (video.paused) {video.play()} else {video.pause()}})video.addEventListener('play', playCallBack)function playCallBack() {if (video.paused) {return;}captureFrame();setTimeout(playCallBack, 40);}function captureFrame() {ctx.drawImage(video, 0, 0, canvas.width, canvas.height)}
</script>

css

<style>
* {margin: 0;
padding: 0;
}
body {overflow: hidden;
}
.videoBox {width: 100%;
height: 100%;
position: relative;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
img {position: absolute;
display: block;
width: 100%;
height: 100%;
}
#btn {position: absolute;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
text-align: center;
}
canvas {width: 100%;
height: 100%;
}
video {position: absolute;
display: none;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>

【注】drawImage

drawImage函数有三种函数原型：

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分：

canvas绘制video相关推荐

canvas绘制视频封面
一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: <!DOCTYPE html ...
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下. ...
canvas绘制图片
canvas绘制图片方法 canvas支持image,svg,video,canvas的绘制drawImage(image, x, y) 在坐标x,y处绘制图片 drawImage(image, x ...
JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器概述 CANVAS绘制核心代码播放器代码使用页面HTML代码使用页面JS代码使用示例概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
史上最详细的使用canvas绘制五星红旗的方法
史上最详细的使用canvas绘制五角星的方法昨天我们在课堂上讲到了HTML5中的canvas标签,canvas标签用于绘制图像(通过脚本,通常是 JavaScript).当天布置的作业就是利用can ...
视频封面图片修改html代码,canvas绘制视频封面的方法
一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: capture screen vi ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...

canvas绘制video

canvas绘制video

主要思路：

html

js

css

【注】drawImage

canvas绘制video相关推荐

最新文章

热门文章