Το αντικείμενο Canvas Βίντεο Μάθημα 5 Το αντικείμενο Canvas Βίντεο
Εικόνα στο αντικείμενο CANVAS Method Περιγραφή drawImage() Σχεδιάζει μια εικόνα, καμβά, ή βίντεο επάνω στον καμβά παράμετροι img Καθορίζει την εικόνα, ή στοιχείου βίντεο για να χρησιμοποιήσετε sx Optional. Η x συντεταγμένη πού θα αρχίσετε το κόψιμο (clip) (η περιοχή της εικόνας που θα δει ο χρήστης είναι η περιοχή που περιγράφεται στο clip) sy Optional. Η y συντεταγμένη πού θα αρχίσετε το κόψιμο (clip) swidth Optional. Το πλάτος της περιοχής που θα κάνουμε clip το image sheight Optional. Το ύψος της περιοχής που θα κάνουμε clip το image x Το x του σημείου που θα τοποθετήσουμε το image στον Canvas y Το y του σημείου που θα τοποθετήσουμε το image στον Canvas width Optional. Το πλάτος του image (αν χρειαστεί θα παραμορφωθεί η εικόνα stretch ή reduce) height Optional. The Το ύψος του image (αν χρειαστεί θα παραμορφωθεί η εικόνα stretch ή reduce)
Ιδιότητες του video element http://www.w3schools.com/tags/ref_av_dom.asp
Κάποια γενικότερα H setTimeout() method καλεί μια συνάρτηση μετά από κάποια miliseconds που προσδιορίζουμε στην κλήση της εντολής H setInterval() method καλεί μια συνάρτηση κάθε ένα συγκεκριμένο αριθμό από milliseconds. H setInterval() θα συνεχίσει να εκτελείτε μέχρι να εκτελεστεί η εντολή clearInterval() ή να κλείσει το παράιθυρο Το ID value που επιστρέφει η setInterval() χρησιμοποιείται ως παράμετρο εισόδου για το clearInterval().
Παράδειγμα αναπαραγωγής βίντεο <!DOCTYPE html> <html> <body> <p>Αρχικό Video :</p> <video id="video1" controls width="270" autoplay> <source src=“small.mp4" type='video/mp4'> <source src=“small.ogg" type='video/ogg'> <source src=“small.webm" type='video/webm'> </video> <canvas id="myCanvas" width=“300" height=“150" style="border:1px solid #d3d3d3;"> </canvas> <script> var thevideo = document.getElementById("video1"); var thecanvas = document.getElementById("myCanvas"); ctx = thecanvas.getContext("2d"); thevideo.addEventListener("play", function() {var i = window.setInterval(function() {ctx.drawImage(thevideo,5,5,260,125)},20);}, false); thevideo.addEventListener("pause", function() {window.clearInterval(i);}, false); thevideo.addEventListener("ended", function() {clearInterval(i);}, false); </script> </body> </html>
Ένα παράδειγμα μόνο για Mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Manipulating_video_using_canvas this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); Let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0);
Διάφορα παραδείγματα https://developer.mozilla.org/samples/video/chroma-key/index.xhtml http://html5doctor.com/demos/video-canvas-magic/demo2.html http://html5doctor.com/demos/video-canvas-magic/demo4.html