HTML Canvas Video Display Primer Tutorial
In doing the research for yesterday’s HTML Canvas Pros and Cons Inline HTML Email Tutorial‘s heavy use of the stupendous HTML(5) canvas element we came upon a very interesting discovery, at least for us, that being the HTML canvas createPattern() Method. Have you read this webpage yet? Did you notice …
Definition and Usage
The createPattern() method repeats the specified element in the specified direction.
The element can be an image, video, or another <canvas> element.
The repeated element can be used to draw/fill rectangles, circles, lines etc.
? So modestly put, in a list like that, but the implications so big, would you not say … eh wot, guv’?!
No examples followed, alas, but a scouring of the “net” arrived at The Definitive Guide to HTML5 Video (ISBN: 978-1-4302-3091-5) mention on a Google search, thanks everyone!
This gave us great scope for a proof of concept web application we got going so long as we clicked (and so the video becomes visible) on the controls of a video element (to play it), as is now the go with a lot of platforms, when it comes to working with (and amongst) media forms. A video plays, and the canvas createPattern helps project “repeat” or “no-repeat” (controllable to user, a concept similar to how background images can work) onto the right hand table cell’s canvas via a hidden smaller canvas conduit, the widths and heights controllable to the user as well (all the way to, perhaps, having the canvas be bigger than the video, and so zoom into it (and maybe zoom out the screen) as you can see with today’s animated GIF tutorial picture). In that tutorial picture, also take a quick skeg at macOS two finger gesture’s video “Picture in Picture” functionality, too.
Pretty interesting start to a journey we think there’ll be more to talk about into the future. You can try for yourself at the “proof of concept” canvas_createpattern_video.html‘s live run link.
If this was interesting you may be interested in this too.
