Question

假设我想在画布视频中绘制控件而不使用视频作为父属性。使用此代码我可以使用视频控制画布但不知何故我想要没有视频的画布，因为父母只是简单地控制画布。这是可能的任何语言？或者可能是愚蠢的问题，但请帮助。我正在使用但不想使用的代码：

    <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load Video Onto The Canvas</title>
<script type="text/javascript">
var videoElement;
var videoDiv;
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);
}
function videoLoaded(event) {
canvasApp();
}
function canvasApp() {
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//video
context.drawImage(videoElement , 85, 30);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);

</script>
</head>
<body>
<div>
<video id="video" width="320" height="240">
<source src="video/browser.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="video/browser.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Answer 1

如果我理解正确：你想只将视频播放器控件（播放，停止，暂停等）绘制到画布上，而不是视频本身？

这不可能。我们无法访问控件，因为这些控件是由浏览器在内部提供的。

解决这个问题的唯一方法是禁用视频元素中的控件并使用普通DOM元素手动创建按钮，或者使用画布为它们绘制和实现逻辑（如果您想要艺术自由）。

您手动创建的这些按钮（无论是DOM / HTML按钮还是画布）只是从代码中触发视频元素本身的命令（即。play()等。）。

Here is an example 我做了一会儿（尽管出于不同的目的）。

Canvas控制没有子属性错误的视频

1 个答案: