在canvas元素上呈现youtube视频 [英] Render youtube videos on canvas element
问题描述
我们正在开发一个html5 / javascript应用程序，它在html5 canvas元素上呈现图像和视频。
对于视频，我们使用的机制如下：
we are developing an html5 / javascript application which renders images and videos on html5 canvas elements. For the videos we use a mechanism which works as follows:
- 在页面上嵌入隐藏的html5视频标签视频为src
- 在每个渲染调用中使用requestAnimationFrame在循环中渲染画布
- 我们从视频标记中获取当前视频帧并渲染它在画布上。
现在我们正在寻找一种在画布上播放youtube视频的方法。
问题是youtube只允许嵌入他们的玩家并且没有选项来获取视频网址（嵌入自己的视频元素）
他们提供的html5播放器放在iframe中因此我们没有机会从中获取视频帧。
Now we are looking for a way to play videos from youtube on the canvas. The problem is that youtube only allows to embedd their players and dont have an option to just fetch the video url (to embedd in an own video element) The html5 player their provide is placed in an iframe and thus we have no chance to grab the video frame from it.
有没有办法做这样的事情。或者youtube将来是否允许获取视频网址？
Is there any way to do something like this. Or will youtube allow to fetch the video urls in future ?
推荐答案
我可能有点晚了，但我遇到了这个网站，在< video>中呈现YouTube视频标记然后在画布上操作它。
I may be a bit late, but I came across this website, which renders a YouTube video in a <video> tag and then manipulates it on a canvas.
有人设法获得网站的源代码
Someone managed to get the source code for the site
https://github.com/endlesshack/youtube-video
我遇到的唯一问题是它似乎不适用于vevo视频
The only problem I had is that it doesn't seem to work with vevo videos
这篇关于在canvas元素上呈现youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
