is html5 doctype necessary for functioning of video tag?

just because the video tag is used does the whole page have to be HTML5??

i did not think so...what do you think?

I have understanding that video tag ( <video> ) it is not strict HTML5 (partly be开发者_JAVA技巧cause strict does not yet exist) nor is HTML5 used or needed to implement the video tag- that the tag can function in HTML4 /regular old HTML and phtml documents …am I wrong?

According to the W3C specs, yes, the <video> tag is available only in HTML5. However, just as with everything else about HTML, I'm sure most browsers will let you use the tag regardless of the doctype.

Here's an example of the <video> tag embedded inside the XHTML 1.0 Strict Doctype,

http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video

Many browsers will play it, IE9 will not without a DOCTYPE. However, you don't have to use the HTML5 DOCTYPE - HTML4 is fine too.

(As a matter of fact, my testing showed that it would work for any DOCTYPE besides HTML2/3 - this includes svg doctype, math and a few more...)

You don't really need the HTML5 DOCTYPE. The code will still work.

If the video doesn't work without it, you can put it in. It probably just depends on the web browser.

I worked on this problem and I found a way to play a video in an xHtml 1.0 strict document on HTML5 browsers.

I published a jQuery plugin here: https://github.com/charlycoste/xhtml-video

And a demo here: http://demo.ccoste.fr/video

Actually, this is quite less powerfull than using a HTML5 tag, but at least... it works!

The solution relies on javascript and canvas but can be gracefully degraded if you use <object> tag.

What I do is actually simple:

1. I create a new video element (not a tag) in memory but I don't add it to the DOM document:

   var video = document.createElement('video');
   

2. I create a new canvas element in memory but I don't add it to the DOM document:

   var canvas = document.createElement('canvas');
   

3. I create a new img element and I add it to the DOM.

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. When video is playing (video.play()), I make it draw each frame in the canvas (which is not visible, because not added to the DOM - which makes the DOM stay valid xhtml 1.0 document)

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

5. Finally I use the toDataURL() method of the canvas element to get a base64 encoded image for the frame and put it to the src attribute of the img element.

   img.setAttribute('src', canvas.toDataURL());
   

By doing this, you make javascript objects play a video out of the DOM and push each frame in an img DOM element. So you can play the video by using HTML5 capabilities of the browser, but with no need of a HTML5 document.

Performance aspect: as it results in a very high consuming process, the playback may flicker... To avoid this, you can decrease rendering quality by using jpeg compression this way : canvas.toDataURL('image/jpeg', quality) where quality is a value between 0 and 1.