我正在为 Canvas 编程类(class)研究一些示例，我们正在视频中。没有语法错误，但该程序中的视频无法播放。该程序的代码直接来自书中，确切的书中示例也不起作用，我已确保 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>最佳答案
因为您正在 DOM 中加载视频，所以在 javascript 添加 onload 事件之前视频可能已经加载。这意味着 play 函数不会被调用。
您可能会更好地使用 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);
}
关于javascript - 为什么这个视频无法播放？ HTML5 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48891722/