Sherzod Posted November 4, 2021 Share Posted November 4, 2021 procedure TMainForm.UniButton15Click(Sender: TObject); begin UniSession.AddJS('var ctx = '+ UniCanvas1.JSName +'._cc_; '+ 'var video = document.createElement("video");'+ 'video.setAttribute("id", "video");'+ 'var playing = false; '+ 'var mask = new Image(); '+ 'function startRendering() '+ '{ '+ ' playing = true; '+ ' requestAnimationFrame( render ); '+ '} '+ 'function stopRendering() '+ '{ '+ ' playing = false; '+ '} '+ 'function render() '+ '{ '+ ' ctx.globalCompositeOperation = "copy"; '+ //' ctx.drawImage(mask, 0, 0, canvas.height * mask.height/mask.width, canvas.height); '+ ' ctx.drawImage(mask, 0, 0, canvas.width, canvas.height); '+ ' ctx.globalCompositeOperation = "source-in"; '+ ' ctx.drawImage(video, 0, 0); '+ ' if( playing ) '+ ' { '+ ' requestAnimationFrame( render ); '+ ' } '+ '} '+ 'var canvas = ' + UniCanvas1.JSName +'._c_;'+ 'var context = canvas.getContext("2");'+ 'video.muted = true; '+ 'video.autoplay = true; '+ 'video.loop = true; '+ 'video.crossOrigin = mask.crossOrigin = "anonymous"; '+ 'video.onplaying = startRendering; '+ 'video.onpause = stopRendering; '+ 'mask.src = "https://upload.wikimedia.org/wikipedia/commons/e/ee/Black_Peace_Dove.svg"; '+ 'mask.onload = function() '+ '{ '+ ' video.src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/d/de/Flying-pigeons-tokyo-japan-slowmotion-2021-5-28.webm/Flying-pigeons-tokyo-japan-slowmotion-2021-5-28.webm.480p.vp9.webm"; '+ ' video.play(); '+ '} ' ); end; 1 Quote Link to comment Share on other sites More sharing options...
Fred Montier Posted November 4, 2021 Share Posted November 4, 2021 Thanks I will make a project example and post here ... This is very useful. 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.