{"id":48975,"date":"2020-05-11T03:01:49","date_gmt":"2020-05-10T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48975"},"modified":"2020-05-11T06:56:24","modified_gmt":"2020-05-10T20:56:24","slug":"html-canvas-video-display-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-video-display-primer-tutorial\/","title":{"rendered":"HTML Canvas Video Display Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Canvas Video Display Primer Tutorial<\/p><\/div>\n

In doing the research for yesterday’s HTML Canvas Pros and Cons Inline HTML Email Tutorial<\/a>‘s heavy use of the stupendous HTML(5) canvas<\/a> element we came upon a very interesting discovery, at least for us, that being the HTML canvas createPattern() Method<\/a>. Have you read this webpage yet? Did you notice …<\/font><\/p>\n

\nDefinition and Usage
\nThe createPattern() method repeats the specified element in the specified direction.
\n
\nThe element can be an image, video<\/font>, or another <canvas> element.
\n
\nThe repeated element can be used to draw\/fill rectangles, circles, lines etc.\n<\/p><\/blockquote>\n

? So modestly put, in a list like that, but the implications so big, would you not say … eh wot, guv’?!<\/font><\/p>\n

No examples followed, alas, but a scouring of the “net” arrived at The Definitive Guide to HTML5 Video<\/a> (ISBN: 978-1-4302-3091-5) mention on a Google<\/a> search, thanks everyone!<\/h4>\n

This gave us great scope for a proof of concept web application we got going so long as we clicked (and so the video<\/a> 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<\/a>). In that tutorial picture, also take a quick skeg at macOS two finger gesture’s video “Picture in Picture” functionality, too.<\/p>\n

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<\/a>‘s live run<\/a> link.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n