How to create a video and a canvas then draw it to the canvas?
Question
I am having trouble getting this video element to add to the canvas it plays it creates inside the canvas but will not draw to the canvas. Can anyone explain to me where I have gone wrong please?
<!DOCTYPE html>
<html>
<style>
canvas {
border: 1px solid black;
}
</style>
<body>
<div id="popUpCanvas">
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var videoCanvas = document.createElement("Canvas");
var video = document.createElement("Video");
var source = document.createElement("Source");
var context = videoCanvas.getContext('2d');
videoCanvas.setAttribute('class', 'CanvasVideo');
videoCanvas.setAttribute('id', 'CanvasVideo');
video.setAttribute('class', 'videoCanvas');
video.setAttribute('id', 'videoCanvas');
video.setAttribute('controls', '');
video.setAttribute('autoplay', '');
source.setAttribute('class', 'videoSource');
source.setAttribute('id', 'videoSource');
source.setAttribute('src', 'http://www.imgur.com/mClEpxu.mp4');
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
videoCanvas.appendChild(video);
context.drawImage(video,0,0,100,100);
document.getElementById("popUpCanvas").appendChild(videoCanvas);
}
</script>
</body>
</html>
2 answers
solution1
0 2020-04-02 00:13:22
You need to update the canvas each frame so that the contents of the video appears in real time. This can be achieved with an Animation Frame:
requestAnimationFrame(updateVideo);
function updateVideo() {
if (!video.ended) requestAnimationFrame(updateVideo);
context.clearRect(0,0,100,100);
context.drawImage(video,0,0,100,100);
}
This function will be called before each frame so that it updates the video with the screen. Hope this helps.
solution2
0 ACCPTED 2020-04-02 00:19:22
You don't need a canvas to show a video on HTML5, this is an example of the working code:
It will have the canvas border around the video, but there is no need to use the canvas element.
<!DOCTYPE html> <html> <style> .CanvasVideo { border: 1px solid black; width: 300px; height: 300px; } video { height: inherit; width: inherit; } </style> <body> <div id="popUpCanvas"> </div> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var videoCanvas = document.createElement("Div"); var video = document.createElement("Video"); var source = document.createElement("Source"); videoCanvas.setAttribute('class', 'CanvasVideo'); videoCanvas.setAttribute('id', 'CanvasVideo'); video.setAttribute('class', 'videoCanvas'); video.setAttribute('id', 'videoCanvas'); video.setAttribute('controls', ''); video.setAttribute('autoplay', ''); source.setAttribute('class', 'videoSource'); source.setAttribute('id', 'videoSource'); source.setAttribute('src', 'http://www.imgur.com/mClEpxu.mp4'); source.setAttribute('type', 'video/mp4'); video.appendChild(source); videoCanvas.appendChild(video); document.getElementById("popUpCanvas").appendChild(videoCanvas); } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.