Video html5：在画布内显示视频

是否可以将html5视频显示为画布的一部分

基本上与在画布上绘制图像的方式相同

context.drawVideo(vid, 0, 0);

谢谢

var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');
var video  = document.getElementById('video');

video.addEventListener('play', function () {
    var $this = this; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            ctx.drawImage($this, 0, 0);
            setTimeout(loop, 1000 / 30); // drawing at 30fps
        }
    })();
}, 0);

我猜上面的代码是不言自明的，如果不在下面添加注释，我将尝试解释上面几行代码

编辑： 以下是一个在线示例，仅供您参考：

var canvas=document.getElementById'canvas'； var ctx=canvas.getContext'2d'； var video=document.getElementById'video'； //设置画布大小=已知时的视频大小 video.addEventListener'loadedmetadata'，函数{ canvas.width=video.videoWidth； canvas.height=video.videoHeight； }; video.addEventListener“播放”功能{ var$this=this；//缓存 函数环{ 如果！$this.paused&！$this.end{ ctx.drawImage$this，0，0； setTimeoutloop，1000/30；//以30fps的速度绘制 } }; }, 0; 试着扮演我： 使用画布显示视频 显示视频与显示图像大致相同。次要的区别在于onload事件以及您需要渲染每一帧的视频这一事实，否则您将只看到一帧而不是动画帧

下面的演示与示例有一些细微的区别。“视频”下的静音功能单击“静音/打开声音”以切换声音，如果没有正确的驱动程序，则执行一些错误检查以捕获IE9+和Edge

保持最新答案。 user372551之前的答案已于2010年12月过期，并且在使用的渲染技术中存在缺陷。它使用setTimeout和33.333..ms的速率，setTimeout将四舍五入到33 ms。这将导致每两秒丢弃一次帧，如果视频帧速率高于30，则可能会丢弃更多帧。使用setTimeout还将引入视频剪切，因为setTimeout无法与显示硬件同步

目前没有可靠的方法可以确定视频帧速率，除非您事先知道视频帧速率，否则应在浏览器上以最大显示刷新率显示视频帧速率。每秒60帧

给出的首要答案是6年前的最佳解决方案，因为requestAnimationFrame根本不受广泛支持，但requestAnimationFrame现在是主流浏览器的标准，应该使用它而不是setTimeout来减少或删除掉的帧，并防止剪切

示例演示。 加载视频并将其设置为循环。只有在您单击视频后，视频才会播放。再次单击将暂停。视频下方有一个静音/声音开启按钮。默认情况下，视频是静音的

请注意IE9+和Edge的用户。您可能无法播放视频格式的WebM，因为它需要其他驱动程序来播放视频。可以在tools.google.com上找到它们

//此代码来自stackoverflow文档的示例文档。有关示例的链接，请参见HTML。 //此代码与示例几乎相同。已添加静音和媒体源。还添加了一些在媒体加载失败时的错误处理，以及修复IE9+和边缘支持的链接。 //盲人密码67。 //原始源返回404 //var mediaSource=http://video.webmfiles.org/big-buck-bunny_trailer.webm; //来自wiki commons的新源。主要学分中的归因。 var mediaSource=http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv var mute=true； var canvas=document.getElementByIdmyCanvas；//从页面中获取画布 var ctx=canvas.getContext2d； var videoContainer；//对象以保存视频和相关信息 var video=document.createElementvideo；//创建一个视频元素 video.src=媒体源； //现在将开始加载视频。 //由于需要一些额外的信息，我们将把视频放在 //为了方便而包含对象 video.autoPlay=false；//确保视频不会自动播放 video.loop=true；//将视频设置为循环。 video.muted=静音； videoContainer={//我们将根据需要添加属性 视频：视频， 就绪：错误， }; //处理错误。这不是目前示例的一部分。只是修复了不喜欢ogv格式视频的边缘 video.onerror=函数e{ document.body.removeChildcanvas； document.body.innerHTML+=加载视频时出现问题； document.body.innerHTML+=IE9+的用户，浏览器不支持此演示使用的WebM视频； document.body.innerHTML+=来自tools.google.com这包括Edge和Windows 10； } video.oncanplay=readyToPlayVideo；//将事件设置为所需的播放功能 //可以在下面找到 函数readyToPlayVideoevent{//这是对视频的引用 //视频可能与画布大小不匹配，因此请找到合适的比例 videoContainer.scale=Math.min canvas.width/this.videoWidth， canvas.height/this.videoHeight； videoContainer.ready=tru E //视频可以播放，因此将其交给显示功能 requestAnimationFrameupdateCanvas； //添加指令 document.getElementByIdplayPause.textContent=单击视频播放/暂停。； document.querySelector.mute.textContent=mute； } 函数updateCanvas{ ctx.clearRect0,0，canvas.width，canvas.height； //仅在加载并准备就绪时绘制 ifvideoContainer！==未定义的&videoContainer.ready{ //在画布上找到视频的左上角 video.muted=静音； var scale=videoContainer.scale； var vidH=videoContainer.video.videoHeight； var vidW=videoContainer.video.videoWidth； var top=画布高度/2-视频/2*比例； var left=canvas.width/2-vidW/2*比例； //现在只需绘制正确大小的视频 ctx.drawImagevideoContainer.video，左，上，vidW*比例，vidH*比例； ifvideoContainer.video.paused{//如果不播放，则显示暂停的屏幕 抽签付款图标； } } //全部完成以供展示 //在1/60秒内请求下一帧 requestAnimationFrameupdateCanvas； } 函数drawPayIcon{ ctx.fillStyle=black；//显示变暗 ctx.globalAlpha=0.5； ctx.fillRect0,0，canvas.width，canvas.height； ctx.fillStyle=DDD；//播放图标的颜色 ctx.globalAlpha=0.75；//部分透明 ctx.beginPath；//创建图标的路径 var size=canvas.height/2*0.5；//图标的大小 ctx.moveTocanvas.width/2+size/2，canvas.height/2；//从尖端开始 ctx.lineTocanvas.width/2-size/2，canvas.height/2+size； ctx.lineTocanvas.width/2-size/2，canvas.height/2-size； ctx.closePath； ctx.fill； ctx.globalAlpha=1；//还原alpha } 函数playPauseClick{ ifvideoContainer！==未定义和&videoContainer.ready{ ifvideoContainer.video.paused{ videoContainer.video.play； }否则{ videoContainer.video.pause； } } } 功能视频静音{ 静音=！静音； 我沉默了{ document.querySelector.mute.textContent=mute； }否则{ document.querySelector.mute.textContent=打开声音； } } //注册活动 canvas.addEventListenerclick，playPauseClick； document.querySelector.mute.AddEventListener单击，视频静音 身体{ 字体：14px arial； 文本对齐：居中； 背景：36A； } 氢{ 颜色：白色； } 帆布{ 边框：10px白色固体； 光标：指针； } a{ 颜色：F93； } .哑巴{ 光标：指针； 显示：首字母； } 基本视频和画布示例 Stackoverflow文档HTML5画布中的代码示例

正在加载内容。

---

属性。您需要更新currentTime视频元素，然后在画布中绘制帧。不要在视频中开始播放事件

---

您也可以使用for ex。此插件

这里有一个解决方案，它使用了更现代的语法，并且比已经提供的解决方案更简洁：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");

video.addEventListener('play', () => {
  function step() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    requestAnimationFrame(step)
  }
  requestAnimationFrame(step);
})

一些有用的链接：

---

有人能解释一下这一点吗。这样做有什么好处实习生的表现？？1你可以操纵画布，这是第一个好处。任何你能想象的事情都是可能的——实时应用过滤器，让画布爆炸，无论你想要什么。2您可以在移动设备上播放视频，而无需打开新视频或显示本机暂停/播放控件。macbook pro网站就是一个例子，它利用视频+画布来支持mobile:Ok，但假设您希望在画布中显示视频，而无需将视频直接添加到页面中。上面的内容是否可以修改为该值，或者是否需要其他方法？是否应该使用RequestAnimationFrame而不是$this，您也可以只使用箭头函数，并按照您的预期正常工作。只需注意几点：video.autoPlay是所有低上限，由于某些原因，不符合典型的camelcase，例如：video.autoplay。实际上并不需要它，因为除非在视频标签中定义，否则它默认为false。大多数可用的视频是30 fps ntsc/hd或25 fps pal，因此您通常可以在循环中安全地切换绘图，这样您只需每秒绘制30 fps，节省30次绘图操作。另外一个提示：您不需要清除每帧画布，除非视频包含在消费端非常罕见且目前仅在webm中支持的alpha通道格式化+闪烁。我尝试将autoplay设置为true，并向playPauseClick函数添加了一个onload事件。然而，它似乎并没有自动播放。有没有办法让视频自动播放？@user3605780这很奇怪。没有一点帮助，我无法让它自动播放。最简单的解决方案是添加线视频，播放；作为函数readyToPlayVideo的最后一行，它是媒体事件的侦听器，可以播放，但是如果视频不在当前活动的浏览器选项卡中，则可能无法播放。@Blindman67感谢aut

---

oplay在Windows和Android上工作。然而，在iOS和Safari上，整个画布视频无法工作。有没有一个解决方案可以让它在iOS上运行？简短、简单、易懂的答案，没有噪音或臃肿的代码，请接受我的投票！此解决方案是在html中呈现视频容器&然后将该信息复制到画布中，如何将视频直接播放到画布中？@RyanStone无法将视频直接播放到画布中。但是这个解决方案很有效。嗨，你能举个例子吗？对于在画布上播放和暂停视频？，我尝试在暂停后播放视频，但我认为在后台它仍在播放。@RomanPodlinov如果无法直接在画布上播放视频，这是否意味着无法构建画布视频编辑器，允许用户上传mp4/mov/avi视频和叠加文本动画，输出为webm视频的位置？谢谢你抽出时间。