← Previous Next →

Scrawl-canvas v8 - Canvas test 010

Use video sources and media streams for Picture entitys

Click or tap on the canvas to start video play

To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.

Copy Starts ('n%')
X:
Y:
Copy Width
'n%'
n
Copy Starts (n)
X:
Y:
Copy Height
'n%'
n
Paste Width
'n%'
n
Paste Height
'n%'
n
Paste Starts ('n%')
X:
Y:
Paste Handles ('n%')
X:
Y:
Paste Starts (n)
X:
Y:
Paste Handles (n)
X:
Y:
Paste Starts ('str')
X:
Y:
Paste Handles ('str')
X:
Y:
Roll
 
Scale
 
Flip-upend
 
Flip-reverse
 

To note: All major browsers support playing video using the HTML <video> element. For most uses (eg: background animation in a website banner; advert with an additional Call-To-Action button) this - or a third-party video solution - will be sufficient. We should only resort to displaying video in a <canvas> element when we need to add additional functionality not supplied by other solutions.

Each browser implements the HTML <video> element in their own way, with differences in how the video data (eg captions, subtitles) and controls look, and their accessibility. The MDN website has a series of articles on how to create a cross-browser video player. Remember that if we add a video to a canvas for any reason beyond decoration, then we will need to implement much of the functionality described in these articles ourselves:

Further useful accessibility-related links:


Test purpose

For the media stream

Touch test: should work as expected - including device camera video streaming (after permission granted)

Annotated code