html5 display video inside canvas

Question

is it possible to display a html5-video as part of the canvas   basically the same way as you draw an Image in the canvas    context drawVideo vid  0  0     thanks

User · Answer

You need to update currentTime video element and then draw the frame in canvas  Don t init play   event on the video    You can also use for ex  this plugin https   github com tstabla stVideo

User · Answer

Using canvas to display Videos  Displaying a video is much the same as displaying an image  The minor differences are to do with onload events and the fact that you need to render the video every frame or you will only see one frame not the animated frames   The demo below has some minor differences to the example  A mute function  under the video click mute sound on to toggle sound  and some error checking to catch IE9  and Edge if they don t have the correct drivers    Keeping answers current   The previous answers by user372551 is out of date  December 2010  and has a flaw in the rendering technique used  It uses the setTimeout and a rate of 33 333  ms which setTimeout will round down to 33ms this will cause the frames to be dropped every two seconds and may drop many more if the video frame rate is any higher than 30  Using setTimeout will also introduce video shearing created because setTimeout can not be synced to the display hardware    There is currently no reliable method that can determine a videos frame rate unless you know the video frame rate in advance you should display it at the maximum display refresh rate possible on browsers  60fps  The given top answer was for the time  6 years ago  the best solution as requestAnimationFrame was not widely supported  if at all  but requestAnimationFrame is now standard across the Major browsers and should be used instead of setTimeout to reduce or remove dropped frames  and to prevent shearing   The example demo   Loads a video and set it to loop  The video will not play until the you click on it  Clicking again will pause  There is a mute sound on button under the video  The video is muted by default      Note users of IE9  and Edge  You may not be able to play the video format WebM as it needs additional drivers to play the videos  They can be found at tools google com Download IE9  WebM support    x000D   x000D     This code is from the example document on stackoverflow documentation  See HTML for link to the example  x000D     This code is almost identical to the example  Mute has been added and a media source  Also added some error handling in case the media load fails and a link to fix IE9  and Edge support  x000D     Code by Blindman67  x000D   x000D   x000D     Original source has returns 404 x000D     var mediaSource    http   video webmfiles org big-buck-bunny trailer webm   x000D     New source from wiki commons  Attribution in the leading credits  x000D  var mediaSource    http   upload wikimedia org wikipedia commons 7 79 Big Buck Bunny small ogv  x000D   x000D  var muted   true  x000D  var canvas   document getElementById  myCanvas       get the canvas from the page x000D  var ctx   canvas getContext  2d    x000D  var videoContainer     object to hold video and associated info x000D  var video   document createElement  video       create a video element x000D  video src   mediaSource  x000D     the video will now begin to load  x000D     As some additional info is needed we will place the video in a x000D     containing object for convenience x000D  video autoPlay   false     ensure that the video does not auto play x000D  video loop   true     set the video to loop  x000D  video muted   muted  x000D  videoContainer         we will add properties as needed x000D       video   video  x000D       ready   false     x000D     x000D     To handle errors  This is not part of the example at the moment  Just fixing for Edge that did not like the ogv format video x000D  video onerror   function e   x000D      document body removeChild canvas   x000D      document body innerHTML      lt h2 gt There is a problem loading the video lt  h2 gt  lt br gt    x000D      document body innerHTML     Users of IE9    the browser does not support WebM videos used by this demo   x000D      document body innerHTML      lt br gt  lt a href  https   tools google com dlpage webmmf   gt  Download IE9  WebM support lt  a gt  from tools google com lt br gt  this includes Edge and Windows 10   x000D       x000D     x000D  video oncanplay   readyToPlayVideo     set the event to the play function that  x000D                                       can be found below x000D  function readyToPlayVideo event      this is a referance to the video x000D         the video may not match the canvas size so find a scale to fit x000D      videoContainer scale   Math min  x000D                           canvas width   this videoWidth   x000D                           canvas height   this videoHeight    x000D      videoContainer ready   true  x000D         the video can be played so hand it off to the display function x000D      requestAnimationFrame updateCanvas   x000D         add instruction x000D      document getElementById  playPause   textContent    Click video to play pause    x000D      document querySelector   mute   textContent    Mute   x000D    x000D   x000D  function updateCanvas    x000D      ctx clearRect 0 0 canvas width canvas height    x000D         only draw if loaded and ready x000D      if videoContainer     undefined  amp  amp  videoContainer ready    x000D             find the top left of the video on the canvas x000D          video muted   muted  x000D          var scale   videoContainer scale  x000D          var vidH   videoContainer video videoHeight  x000D          var vidW   videoContainer video videoWidth  x000D          var top   canvas height   2 -  vidH  2     scale  x000D          var left   canvas width   2 -  vidW  2     scale  x000D             now just draw the video the correct size x000D          ctx drawImage videoContainer video  left  top  vidW   scale  vidH   scale   x000D          if videoContainer video paused      if not playing show the paused screen  x000D              drawPayIcon    x000D            x000D        x000D         all done for display  x000D         request the next frame in 1 60th of a second x000D      requestAnimationFrame updateCanvas   x000D    x000D   x000D  function drawPayIcon    x000D       ctx fillStyle    black       darken display x000D       ctx globalAlpha   0 5  x000D       ctx fillRect 0 0 canvas width canvas height   x000D       ctx fillStyle     DDD      colour of play icon x000D       ctx globalAlpha   0 75     partly transparent x000D       ctx beginPath       create the path for the icon x000D       var size    canvas height   2    0 5      the size of the icon x000D       ctx moveTo canvas width 2   size 2  canvas height   2      start at the pointy end x000D       ctx lineTo canvas width 2 - size 2  canvas height   2   size   x000D       ctx lineTo canvas width 2 - size 2  canvas height   2 - size   x000D       ctx closePath    x000D       ctx fill    x000D       ctx globalAlpha   1     restore alpha x000D        x000D   x000D  function playPauseClick    x000D       if videoContainer     undefined  amp  amp  videoContainer ready   x000D            if videoContainer video paused                                    x000D                  videoContainer video play    x000D             else  x000D                  videoContainer video pause    x000D              x000D         x000D    x000D  function videoMute    x000D      muted    muted  x000D   if muted   x000D           document querySelector   mute   textContent    Mute   x000D       else  x000D           document querySelector   mute   textContent   Sound on   x000D        x000D   x000D   x000D    x000D     register the event x000D  canvas addEventListener  click  playPauseClick   x000D  document querySelector   mute   addEventListener  click  videoMute  x000D  body   x000D      font  14px  arial  x000D      text-align   center  x000D      background    36A  x000D    x000D  h2   x000D      color   white  x000D    x000D  canvas   x000D      border   10px white solid  x000D      cursor   pointer  x000D    x000D  a   x000D    color    F93  x000D    x000D   mute   x000D      cursor   pointer  x000D      display  initial     x000D    x000D   lt h2 gt Basic Video  amp  canvas example lt  h2 gt  x000D   lt p gt Code example from Stackoverflow Documentation HTML5-Canvas lt br gt  x000D   lt a href  https   stackoverflow com documentation html5-canvas 3689 media-types-and-the-canvas 14974 basic-loading-and-playing-a-video-on-the-canvas t 201607271638099201116  gt Basic loading and playing a video on the canvas lt  a gt  lt  p gt  x000D   lt canvas id  myCanvas  width    532  height   300   gt  lt  canvas gt  lt br gt  x000D   lt h3 gt  lt div id    playPause  gt Loading content  lt  div gt  lt  h3 gt  x000D   lt div class  mute  gt  lt  div gt  lt br gt  x000D   lt div style  font-size small  gt Attribution in the leading credits  lt  div gt  lt br gt  x000D   x000D   x000D    Canvas extras  Using the canvas to render video gives you additional options in regard to displaying and mixing in fx  The following image shows some of the FX you can get using the canvas  Using the 2D API gives a huge range of creative possibilities   Image relating to answer Fade canvas video from greyscale to color   See video title in above demo for attribution of content in above inmage

User · Answer

var canvas   document getElementById  canvas    var ctx      canvas getContext  2d    var video    document getElementById  video     video addEventListener  play   function          var  this   this    cache      function loop             if    this paused  amp  amp    this ended                ctx drawImage  this  0  0               setTimeout loop  1000   30      drawing at 30fps                        0     I guess the above code is self Explanatory  If not drop a comment below  I will try to explain the above few lines of code  Edit   here s an online example  just for you    Demo   x000D   x000D  var canvas   document getElementById  canvas    x000D  var ctx   canvas getContext  2d    x000D  var video   document getElementById  video    x000D   x000D     set canvas size   video size when known x000D  video addEventListener  loadedmetadata   function     x000D    canvas width   video videoWidth  x000D    canvas height   video videoHeight  x000D      x000D   x000D  video addEventListener  play   function     x000D    var  this   this    cache x000D     function loop     x000D      if    this paused  amp  amp    this ended    x000D        ctx drawImage  this  0  0   x000D        setTimeout loop  1000   30      drawing at 30fps x000D        x000D          x000D     0   x000D   lt div id  theater  gt  x000D     lt video id  video  src  http   upload wikimedia org wikipedia commons 7 79 Big Buck Bunny small ogv  controls  false  gt  lt  video gt  x000D     lt canvas id  canvas  gt  lt  canvas gt  x000D     lt label gt  x000D       lt br   gt Try to play me    lt  label gt  x000D     lt br   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s a solution that uses more modern syntax and is less verbose than the ones already provided   const canvas   document querySelector  canvas    const ctx   canvas getContext  2d    const video   document querySelector  video     video addEventListener  play        gt      function step         ctx drawImage video  0  0  canvas width  canvas height      requestAnimationFrame step        requestAnimationFrame step        Some useful links    MDN Documentation for window requestAnimationFrame    Can I use requestAnimationFrame

[video] html5: display video inside canvas

Examples related to video

Examples related to html

Examples related to canvas