CODEWITHSUNDEEP
javascripthtmlcanvasvideo
user8716582
user8716582

Reputation:

Why won't this video play? HTML5 Canvas

I am working through some examples for a canvas programming class and we are on video. There are no syntax errors but the video in this program will not play. The code for this program is straight from the book, the exact book example won't work either, I have made sure that chrome is compatible with .mp4 and the video is in the same folder as the .js and .html.

    //example 4.23.js
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        video = document.getElementById('video');
    
    function animate() {
       if (!video.ended) {
         context.drawImage(video, 0, 0, canvas.width, canvas.height);
         window.requestNextAnimationFrame(animate);
       }
    }
    
    video.onload = function (e) {
       video.play();
       window.requestNextAnimationFrame(animate);
    };

    //requestAnimationFrame.js
    window.requestNextAnimationFrame =
       (function () {
          var originalWebkitRequestAnimationFrame = undefined,
              wrapper = undefined,
              callback = undefined,
              geckoVersion = 0,
              userAgent = navigator.userAgent,
              index = 0,
              self = this;
    
          // Workaround for Chrome 10 bug where Chrome
          // does not pass the time to the animation function
          
          if (window.webkitRequestAnimationFrame) {
             // Define the wrapper
    
             wrapper = function (time) {
               if (time === undefined) {
                  time = +new Date();
               }
               self.callback(time);
             };
    
             // Make the switch
              
             originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;    
    
             window.webkitRequestAnimationFrame = function (callback, element) {
                self.callback = callback;
    
                // Browser calls the wrapper and wrapper calls the callback
                
                originalWebkitRequestAnimationFrame(wrapper, element);
             }
          }
    
          // Workaround for Gecko 2.0, which has a bug in
          // mozRequestAnimationFrame() that restricts animations
          // to 30-40 fps.
    
          if (window.mozRequestAnimationFrame) {
             // Check the Gecko version. Gecko is used by browsers
             // other than Firefox. Gecko 2.0 corresponds to
             // Firefox 4.0.
             
             index = userAgent.indexOf('rv:');
    
             if (userAgent.indexOf('Gecko') != -1) {
                geckoVersion = userAgent.substr(index + 3, 3);
    
                if (geckoVersion === '2.0') {
                   // Forces the return statement to fall through
                   // to the setTimeout() function.
    
                   window.mozRequestAnimationFrame = undefined;
                }
             }
          }
          
          return window.requestAnimationFrame   ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             window.oRequestAnimationFrame      ||
             window.msRequestAnimationFrame     ||
    
             function (callback, element) {
                var start,
                    finish;
    
                window.setTimeout( function () {
                   start = +new Date();
                   callback(start);
                   finish = +new Date();
    
                   self.timeout = 1000 / 60 - (finish - start);
    
                }, self.timeout);
             };
          }
       )
    ();
<!DOCTYPE html>
       <head>
         <title>Video</title>
    
          <style> 
             body {
                background: #dddddd;
             }
    
             #canvas {
                background: #ffffff;
                border: thin solid darkgray;
             }
    
             #video {
                display: none;
             }
    		 #toMain {
    	margin-left: auto;
        margin-right: auto;
    	text-align: center;
    }
          </style>
       </head>
    
      <body>
      <p>James Gossling, Multimedia for Web Design, Spring 2018<br>Week 6 HW Example 4.23</p>
    
        <video id='video' poster>
           <source src='caterpillar.mp4'/>
        </video>
    
        <canvas id='canvas' width='720' height='405'>
          Canvas not supported
        </canvas>
    	<p>I changed:<br>
    1. <br>
    2. <br>
    3. </p>
    
        <script src='requestNextAnimationFrame.js'></script>
        <script src='example4.23.js'></script>
    	
    	<div id="toMain">
    <a href="http://webstudentwork.com/jgossling/MMWD/index.html">Back to Main</a>
    </div>
      </body>
    </html>

Upvotes: 0

Views: 1955

Answers (2)

Blindman67
Blindman67

Reputation: 54128

Because you are loading the video in the DOM it could be possible that the video has already loaded before your javascript adds the onload event. That means that the play function will not be called.

You may be better of creating the video in javascript.

const video = document.createElement("video")
video.src = "theVideoUrl";
video.oncanplay = ()=>{
    requestAnimationFrame(animate);
    video.play();
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function animate() {
   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
   requestAnimationFrame(animate);
}

Upvotes: 2

APAD1
APAD1

Reputation: 13666

I'm kind of confused as to what you're trying to do here because you have a polyfill for requestNextAnimationFrame which has nothing to do with HTML5 video, nor does canvas, but if you remove the code from your CSS that is hiding the video and you change video.onload to video.onloadstart the video will work. 

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    video = document.getElementById('video');

video.onloadstart = function (e) {
   video.play();
};
body {
  background: #dddddd;
}

#canvas {
  background: #ffffff;
  border: thin solid darkgray;
}

#toMain {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
<p>James Gossling, Multimedia for Web Design, Spring 2018<br>Week 6 HW Example 4.23</p>

    <video id='video' poster>
       <source src='https://www.w3schools.com/html/mov_bbb.mp4'/>
    </video>

    <canvas id='canvas' width='720' height='405'>
      Canvas not supported
    </canvas>
    <p>I changed:<br>
1. <br>
2. <br>
3. </p>

<div id="toMain">
  <a href="http://webstudentwork.com/jgossling/MMWD/index.html">Back to Main</a>
</div>

Upvotes: 0

Related Questions