Youtube Video Inside Canvas July 10, 2023 Post a Comment I want to play youtube video inside canvas,I use fabric.js and youtube-api my video tag code looks like this Solution 1: Amend css as neccessary and obviously add video path! Reference You can convert a youtube vid into various formats using www.clipconverter.cc Baca JugaHow Do I Make A Canvas Drawing To Completely Fill The Browser?Why Isn't This Element Rotation Working?Control Multiple Tab-contents With One Nav-tabsdocument.addEventListener('DOMContentLoaded', function() { var v = document.getElementById('v'); var canvas = document.getElementById('c'); var context = canvas.getContext('2d'); var cw = Math.floor(canvas.clientWidth / 100); var ch = Math.floor(canvas.clientHeight / 100); canvas.width = cw; canvas.height = ch; v.addEventListener('play', function() { draw(this, context, cw, ch); }, false); }, false); functiondraw(v, c, w, h) { if (v.paused || v.ended) returnfalse; c.drawImage(v, 0, 0, w, h); setTimeout(draw, 20, v, c, w, h); }Copybody { background: black; } #c { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } #v { position: absolute; top: 50%; left: 50%; margin: -180px00 -240px; }Copy<!DOCTYPE html><title>Video/Canvas Demo 1</title><canvasid=c></canvas><videoid=vcontrolsloop><sourcesrc=video.webmtype=video/webm><sourcesrc=video.oggtype=video/ogg><sourcesrc=video.mp4type=video/mp4></video>Copy Share You may like these postsGet Youtube Video Current TimeControlling Playback Of Multiple Youtube Videos With The Youtube Js Api (playing At The Same Time)Cannot Read Property "search" Of UndefinedYoutube Clip Auto Play And Start From Beginning When Pressed Post a Comment for "Youtube Video Inside Canvas"
Post a Comment for "Youtube Video Inside Canvas"