Click here to Skip to main content

15,884,537 members

Sign in

Sign in

Email

Password

Forgot your password?

Sign in with

home
articles
quick answersQ&A
discussionsforums
featuresfeatures
communitylounge
help?

Search within:
Articles
Quick Answers
Messages

Use my saved content filters

All Questions All Unanswered FAQ

Been asked to draw an mp4 video on a canvas? Anyone know how to do this?

Please Sign up or sign in to vote.

2.00/5 (4 votes)

See more:

Been asked to draw an mp4 video on a canvas? Anyone know how to do this?

Posted 6-Mar-13 10:07am

Comments

Sergey Alexandrovich Kryukov 6-Mar-13 16:11pm

On HTML5 canvas? What it is suppose to mean? Do you even know what it is about? :-)
Ask the one who asked you. Wow!
—SA

Member 9889448 6-Mar-13 16:12pm

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

http://www.w3schools.com/html/html5_canvas.asp

Sergey Alexandrovich Kryukov 6-Mar-13 16:23pm

OK, do you understand now that it's time to remove your question, or you want to wait for some up-votes from others? :-)
—SA

Andrews Smith 6-Mar-13 18:55pm

You're making it seem like you can't play a video on a html5 canvas? But you can but the term is draw..

Sergey Alexandrovich Kryukov 6-Mar-13 19:26pm

Yes. Your sample does not actually draw anything on Canvas. But I can admit that the contradiction is just the wordplay...

Here is how: HTML5 canvas is a pure vector-graphics tool. You questions sounds like you want to show video using this graphics. Formally, "draw on a canvas" really might be interpreted as you simply need to position video on some canvas graphics element. Even though the solution has nothing to do with this canvas (but it uses HTML5), formally it is "on a canvas". Sorry, I wasn't quite accurate, but I really though you are asking about the use of Canvas for showing video. You also could explain it more clearly...

Now, do you have a question?
—SA

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

This is a way of drawing a video on a Canvas for playback, courtesy of oreilly.com

HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX6: Basic HTML5 Load Video Onto The Canvas</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var videoElement;
var videoDiv;
function eventWindowLoaded() {

   videoElement = document.createElement("video");
   videoDiv = document.createElement('div');
   document.body.appendChild(videoDiv);
   videoDiv.appendChild(videoElement);
   videoDiv.setAttribute("style", "display:none;");
   var videoType = supportedVideoFormat(videoElement);
   if (videoType == "") {
      alert("no video support");
      return;
   }
   videoElement.setAttribute("src", "muirbeach." + videoType);
   videoElement.addEventListener("canplaythrough",videoLoaded,false);

}

function supportedVideoFormat(video) {
   var returnExtension = "";
   if (video.canPlayType("video/webm") =="probably" || 
       video.canPlayType("video/webm") == "maybe") {
         returnExtension = "webm";
   } else if(video.canPlayType("video/mp4") == "probably" || 
       video.canPlayType("video/mp4") == "maybe") {
         returnExtension = "mp4";
   } else if(video.canPlayType("video/ogg") =="probably" || 
       video.canPlayType("video/ogg") == "maybe") {
         returnExtension = "ogg";
   }

   return returnExtension;

}

function canvasSupport () {
     return Modernizr.canvas;
}

function videoLoaded(event) {

   canvasApp();

}

function canvasApp() {

   if (!canvasSupport()) {
          return;
        }

function  drawScreen () {

      //Background
      context.fillStyle = '#ffffaa';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000';
      context.strokeRect(5,  5, theCanvas.width−10, theCanvas.height−10);
      //video
      context.drawImage(videoElement , 85, 30);

   }

   var theCanvas = document.getElementById("canvasOne");
   var context = theCanvas.getContext("2d");
   videoElement.play();

   setInterval(drawScreen, 33);

}

</script>

</meta></head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="300">
 Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Share this answer

Posted 6-Mar-13 12:58pm

Add a Solution

Add your solution here

Plain Text

ASM

ASP

ASP.NET

BASIC

BAT

C#

C++

COBOL

CoffeeScript

CSS

Dart

dbase

F#

FORTRAN

HTML

Java

Javascript

Kotlin

Lua

MIDL

MSIL

ObjectiveC

Pascal

PERL

PHP

PowerShell

Python

Razor

Ruby

Scala

Shell

SLN

SQL

Swift

T4

Terminal

TypeScript

VB

VBScript

XML

YAML

OKPaste as

Strip HTML

Encode HTML

Paste as-is

Code block

Quoted Text

Best guess

To display as

The content must be between 30 and 50000 characters.

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Top Experts

Last 24hrs

This month

CPallini	155
k5054	105
M-Badger	80
OriginalGriff	70
Richard MacCutchan	65

Pete O'Hanlon	2,065
OriginalGriff	1,565
Graeme_Grant	1,030
Richard Deeming	893
Dave Kreskowiak	744

Related Questions

HTML5 Canvas drawing framework

Anyone know a good website, besides github and stackexchange, to ask questions about openlayers?

unable to draw more then 1 shape on html5 canvas

Split and Merge MP4 video

Draw multiple rectangles on WPF canvas

How do I write an mp4 file using audio and video buffer in javascript

download HTML5 mp4 video using Javascript

Zoom in HTML5 canvas and allow drawing

Draw onto canvas as user moves

Help me for andriod of canvas

Advertise
Privacy
Cookies
Terms of Use
Last Updated 6 Mar 2013

Layout: fixed | fluid

Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900