Question

我正在编写一些画布编程类的例子，我们正在观看视频。没有语法错误，但此程序中的视频无法播放。这个程序的代码直接来自本书，完整的书籍示例也不起作用，我已确保chrome与.mp4兼容，并且视频与.js和.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>

Answer 1

因为您要在DOM中加载视频，所以在您的javascript添加onload事件之前，视频可能已经加载。这意味着不会调用播放功能。

您最好在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);
}

Answer 2

我对你在这里尝试做什么很困惑，因为你有requestNextAnimationFrame的polyfill与HTML5 video无关，也没有{ {1}}，但如果您从CSS中删除隐藏视频的代码，并且您将canvas更改为video.onload，则该视频将有效。

＆＃13;

video.onloadstart

＆＃13;

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    video = document.getElementById('video');

video.onloadstart = function (e) {
   video.play();
};

＆＃13;

body {
  background: #dddddd;
}

#canvas {
  background: #ffffff;
  border: thin solid darkgray;
}

#toMain {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

＆＃13;

这个视频为什么不播放？ HTML5画布

2 个答案: