Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html lang="en">
    <head>
      <meta charset="utf-8"/>
      <title>Video</title>
        <style>
            body {
                margin: 10px;
                padding: 0px;
            }
​
            #myCanvas {
                border: 10px solid red;
            }
        </style>
        <script>
            var video;
            var canvas, ctx;
            var angle = 0;
​
            function init() {
                video = document.getElementById('sourcevid');
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');
​
                setInterval("processFrame()", 25);
            }
​
            function processFrame() {
​
                // Uncomment next line for drawing 100% copy of the video content
                //ctx.drawImage(video, 0, 0);
​
                // Comment these 4 lines if you uncommented the previous one
                ctx.drawImage(video, 0, 0, 320, 180);
​
                drawRotatingVideo(480, 90);
​
                ctx.drawImage(video, 0, 180, 320, 180);
                ctx.drawImage(video, 320, 180, 320, 180);
            }
​
            function drawRotatingVideo(x, y) {
                // Clear thze zone at the top right quarter of the canvas
                ctx.clearRect(320, 0, 320, 180);
​
                // We are going to change the coordinate system, save the context !
                ctx.save();
                // translate, rotate and recenter the image at its "real" center, 
                //not the top left corner
                ctx.translate(x, y);
                ctx.rotate(angle += 0.01);
                ctx.translate(-80, -45);
​
                ctx.drawImage(video, 0, 0, 160, 90);
​
                // restore the context
                ctx.restore();
​
            }
        </script>
    </head>
​
    <body onload="init()" >
        <p>This is a &lt;video&gt; element: </p>
        <video id="sourcevid" autoplay loop>
            <source src="https://mainline.i3s.unice.fr/mooc/BigBuckBunny_640x360.mp4" type="video/mp4" />
            <source src="https://mainline.i3s.unice.fr/mooc/BigBuckBunny_640x360.ogv" type="video/ogg"/>
        </video>
        <p>This is a &lt;canvas&gt; element: </p>
        <canvas id="myCanvas" width="620" height="360"></canvas>
    </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
marieforguepro
0viewers