Render youtube videos on canvas element

问题

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:

1. embedd a hidden html5 video tag on the page with the desired video as src
2. use requestAnimationFrame to render the canvas in a loop
3. on each render call we grab the current video frame from the video tag and render it onto the canvas.

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.

Is there any way to do something like this. Or will youtube allow to fetch the video urls in future ?

回答1:

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.

http://omgig.com/

Someone managed to get the source code for the site

https://github.com/endlesshack/youtube-video

The only problem I had is that it doesn't seem to work with vevo videos

来源：https://stackoverflow.com/questions/14259626/render-youtube-videos-on-canvas-element