您的位置：首页 > Web前端

前端video如何转化为canvas

2020-04-05 07:16 1121 查看

效果图

由于用的公司的电脑, 不太方便录制, 不过亲测是好使的. (之后会补上的)

简介

本次使用的框架为国外比较出名的HTML5 2D渲染引擎, http://www.pixijs.com/
本篇开发基于https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js
其框架的4.7.1版本进行开发. 实现的效果: dom节点只有canvas, 视频在canvas播放, 有声音.

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script>

var app = new PIXI.Application(375, 667, { transparent: true });
document.body.appendChild(app.view); // 创建canvas画布场景

var button = new PIXI.Graphics()
.beginFill(0x0, 0.5)
.drawRoundedRect(0, 0, 100, 100, 10)
.endFill()
.beginFill(0xffffff)
.moveTo(36, 30)
.lineTo(36, 70)
.lineTo(70, 50);
// 这里为什么要用一个button呢, 在移动端就不用说了, video是没法自动播放的. chrome66以上也做了限制, 当用户没有对当前页面做出任何操作的时候触发video的play函数是会报错的, chrome官方解释为怕给用户带来烦恼, 因此这里需要用button触发一下
// 这里的button是根据pixi的Graphics画出来的, 可以在上面绑定事件

button.x = (app.screen.width - button.width) / 2;
button.y = (app.screen.height - button.height) / 2;

button.interactive = true;
button.buttonMode = true;

app.stage.addChild(button);

button.on('pointertap', onPlayVideo);

function onPlayVideo() {

button.destroy();

var texture = PIXI.Texture.fromVideo('找不到可以用的视频url, 你自己搞一个看看, 本地文件也可以');

var video = texture.baseTexture.source; // 这就是video的dom对象
video.loop = 'loop'

var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = app.screen.width;
videoSprite.height = app.screen.height;

app.stage.addChild(videoSprite);
}

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

原理

原生js实现上面功能

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>

<video id="video" controls loop width='400' height='600' autoplay webkit-playsinline="true" src='你的本地视频或者好使的url'></video>

<script>
var VideoToCanvas = (function(window, document) {
function VideoToCanvas(videoElement) {
if(!videoElement) {return;}

var canvas = document.createElement('canvas');
canvas.width = videoElement.offsetWidth;
canvas.height = videoElement.offsetHeight;
ctx = canvas.getContext('2d');

var newVideo = videoElement.cloneNode(false);

var timer = null;

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

function drawCanvas() {
ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
timer = requestAnimationFrame(drawCanvas);
}

function stopDrawing() {
cancelAnimationFrame(timer);
}

newVideo.addEventListener('play', function() {
drawCanvas();
},false);
newVideo.addEventListener('pause', stopDrawing, false);
newVideo.addEventListener('ended', stopDrawing, false);

videoElement.parentNode.replaceChild(canvas, video);

this.play = function() {
newVideo.play();
};

this.pause = function() {
newVideo.pause();
};

this.playPause = function() {
if(newVideo.paused) {
this.play();
} else {
this.pause();
}
};

this.change = function(src) {
if(!src) {return;}
newVideo.src = src;
};

this.drawFrame = drawCanvas;
}

return VideoToCanvas;
})(window, document);

var video = document.getElementById('video');
var canvas = new VideoToCanvas(video);

window.setTimeout(() => {
canvas.pause()
}, 2000); // 2秒后暂停

</script>

</body>
</html>

结论: 本以为canvas可以改善在低端设备的视频播放情况, 研究一下发现没用, 该播不了的还是播不了, 不过这种方法倒是可以反盗链

  • 点赞
  • 收藏
  • 分享
  • 文章举报
刘翾 博客专家 发布了167 篇原创文章 · 获赞 275 · 访问量 59万+ 他的留言板 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航