{{tag>dragonscript graphic canvas ui video}}
<WRAP youarehere>
[[:start|Start Page]] >> [[:gamedev|Game Development with the Drag[en]gine]] >> [[gamedev:canvassystem:introduction|Canvas System]] >> **Canvas Video Player**
</WRAP>

====== Canvas Video Player ======
Video player canvas display a #@LinkApiDocDE2_HTML~classdeVideo.html,video resource~@# using a #@LinkApiDocDE2_HTML~classdeVideoPlayer.html,video player resource~@#. Video players can be shared if required allowing to show the same video frame in different places including 3D dynamic skin renderables. To play the video call the update function on the video player resources during game frame updating. This is not done automatic to allow individual advancing of video frames. This can be used to use videos as image animations selecting individual images.

The video is scaled to fill the entire canvas. This requires the canvas size to be set to the video size for proper 1-on-1 pixel matching. A transformation matrix can be used to apply effects like stretching if required. Canvas video players have a **repeat-x** and **repeat-y** parameter. The default value for both repeat parameters is 1 displaying the stretched video frame exactly once. Using repetition values larger than 1 duplicates the video frame along the respective axis. The repeated video frames are stretched to fill the entire canvas. Thus increasing the repetition does not enlarge the canvas but simply tiles the video frame in the respective direction fitting into the same canvas content area as with no repetition used.

<WRAP center box 700px>
{{ :gamedev:canvassystem:canvas_videoplayer.png |Same video in different canvas with different repeat values}}
<WRAP centeralign>Same video in different canvas with different repeat values.</WRAP>
</WRAP>

====== Usage example DragonScript ======
<code>
// during initialization
var Video video = Video.new( "/videos/example_video.ogv", true )

var VideoPlayer videoPlayer = VideoPlayer.new()
videoPlayer.setVideo( video )    // assign video
videoPlayer.setLooping( true )   // loop video upon updating
videoPlayer.play()               // advance video during frame updates

var Canvas canvas = Canvas.new( Canvas.VIDEOPLAYER )
canvas.setSize( video.getSize() )          // set correct size to avoid stretching
canvas.setPosition( Point.new( 10, 20 ) )  // set position relative to parent canvas
canvas.setVideoPlayer( videoPlayer )       // assign video player
parentCanvas.addCanvas( canvas )           // add canvas to parent making it visible

// during frame update for example in response to Game.onFrameUpdate()
videoPlayer.update( Engine.getElapsedTime() )   // advance video by the amount of time past since the last frame
</code>