使用原生 Canvas 播放视频

在使用网页播放视屏是常常会有写原生视频标签无法做到的事，比如在手机播放时可能会被手机播放器接管播放，或者加些弹幕，或者自定义些控件。

今天就写了个简单版的 Video 标签转 Canvas 播放视频的代码功能，该对象使用非常简单

// 使用方法：1
var video = document.querySelector("video") // 获取到视频标签
// 实例化 Canvas 对象并播放，该操作会自动创建一个 Canvas 标签放到 video 标签同级并隐鲹原有的 video 标签
var v2c = new Video2Canvas(video).play(); // 使用方法：2
var video = document.querySelector("video") // 获取到视频标签
var canvas = document.querySelector("canvas") // 获取到自己准备好的canvas标签
// 实例化 Canvas 对象并播放
var v2c = new Video2Canvas(video, canvas).play();

这是全部代码


/** @Author: Summer* @LastEditors: Summer* @Description: * @Date: 2022-04-20 14:12:58 +0800* @LastEditTime: 2022-04-20 15:41:17 +0800* @FilePath: \test\index.js*/
(function(){window.Video2Canvas = class Video2Canvas {static PLAY_STATUC = { PLAY: 1, PAUSE: 0 }constructor(video, canvas) {this.statuc = Video2Canvas.PLAY_STATUC.PAUSE;this.video = video;if(!(this.canvas = canvas)) {this.canvas = document.createElement("canvas");this.canvas.width = video.videoWidth,this.canvas.height = video.videoHeight,this.canvas.className = video.className; video.style.display = "none"video.parentNode.appendChild(this.canvas);}this.c2d = this.canvas.getContext("2d");this.video.addEventListener("play", this.play.bind(this))this.video.addEventListener("pause", this.pause.bind(this))}render(){if(this.statuc == Video2Canvas.PLAY_STATUC.PLAY){this.c2d.clearRect(0, 0, this.canvas.width, this.canvas.height);this.c2d.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);requestAnimationFrame(this.render.bind(this))}}play(){console.log("播放")if(this.video.paused) this.video.play();this.statuc = Video2Canvas.PLAY_STATUC.PLAY;this.render();return this;}pause(){console.log("暂停")if(this.video.played) this.video.pause();this.statuc = Video2Canvas.PLAY_STATUC.PAUSE;return this;}
}})()

使用原生 Canvas 播放视频相关推荐

抖音只能上下滑动吗_仿抖音上下滑动播放视频
太多朋友对短视频,上下滚动播放视频效果比较比较研究,今天看看这个案例. 讲下大概思路,使用Recycleview配合自定义LinearLayoutManager来实现这个功能,这里着重说下自定义Lin ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
36.Silverlight中播放视频和打印文档【附带源码实例】
在silverlight实际项目中时常会需要播放视频和打印文档,在本节中我们将制作一个最简单的播放视频和打印文档的实例. 一.播放WMV视频首先我们创建一个Silverlight应用程序SLShow ...
基于canvas的视频遮罩插件
作者:云荒杯倾作者博客视频遮罩介绍为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域.应用场景包括遮挡卫视图标.遮挡视频右下角广告.充当 ...
【Javascript】【视频录制】通过video标签和canvas实现视频截图录制和下载
录像原理创建一个画布,video标签本身不具备记录画面功能,所以我们需要通过Canvas来达成这个功能创建一个录制器,与CanvasStream绑定,这样画布绘制什么,录制器都能触发回调创建一个 ...
html怎么给视频加遮罩,详解基于canvas的视频遮罩插件
为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域.应用场景包括遮挡卫视图标 . 遮挡视频右下角广告 . 充当马赛克等. 一个长视频可能包 ...
如何在浏览器 console 控制台中播放视频？
如何在浏览器 console 控制台中播放视频? 要实现这个目标,主要涉及到这几个点: 如何获取和解析视频流? 如何在 console 里播放动态内容? 如何在 console 里播放彩色内容? 如何 ...
VideoView播放视频黑屏问题处理
前言你又擦肩而过你耳机听什么能不能告诉我 --. 记得我写给你的情书都什么年代了到现在我还在写着总有一天总有一年会发现有人默默的陪在你的身边也许我不该在你的世界当你收到情书也代 ...

使用原生 Canvas 播放视频

使用原生 Canvas 播放视频相关推荐

最新文章

热门文章