Embed video in web page (HTML)

Question

I want embed a video in a webpage.
I don't want to use flash because it's unavailable for a huge number of platforms.
I'm reluctant to use HTML5 becase it's not too standard yet (It IS standard, but most people don't have browsers that support it)

Is there any other way? Or should I stick to HTML5 and a HUGE banner telling people to upgrade their browser?

Answer 1

There are a few ways to combine HTML5 video with fallbacks for non-supporting browsers. A few specific solutions have been demonstrated.

One example is Video for Everybody by Camen Design, which conforms to HTML5, and uses conditional comments for IE and a nested object tag for older browsers. This should be standards-compliant, backwards-compatible, and future proof.

Answer 2

HTML 5 is not standard. It is a draft. It will probably become standard one day. It will probably change first.

If you want to embed video in a page then, today at least, Flash is the best supported option you have available. I'd provide a link to a regular downloadable version as an option for people who don't have Flash (or who just want to watch the video in a dedicated video player).

Telling people to upgrade their browser won't help a great deal. As far as I know, the only browser with video support in a stable release is Firefox. Chrome doesn't support it except in the development version. I don't think Opera has brought out a stable build with support. Microsoft certainly hasn't added it to Internet Explorer yet. Safari I'm not sure about.

If you really want to avoid Flash, then you could use an HTML 4.01 object.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

… and hope the user has a plug-in capable of handling the video installed.

Answer 3

I've just come across Cortado. It's a Java applet that plays an OGG. I actualy have to thank David Dorward for this, since checking up HTML5's status made me come across it. Firefox suggests using something like:

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

Java is available to FAR MORE platforms than flash, and, in this case, if just a fallback to HTML5.

(source)

Answer 4

I know it's a bit late, but did you have a look at VLC ?

It can be embedded in a website, runs on Windows, Mac OS & Linux, is free, open source, supports a lot of video/audio format...

The drawback is that it doesn't have a nice GUI with play/pause/set volume/ ... functions , you have to create them yourself.

You can have a look at this article: http://www.videolan.org/doc/play-howto/en/ch04.html#id310965

Answer 5

Why do you think a lot of large websites use Flash to play video? Probably not because of it's unavailability... Of course there are alternatives to embed video content in a web page, but if availability is an issue, Flash is the best way to go at the moment.

Answer 6

I worked on this problem as I'm very interested in xHtml+RDFa and I found a way to play a video in an xHtml 1.0 strict document on HTML5 browsers without blocking not 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 by using <object> tags (that's what my jQuery plugin does).

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.

And if the browser has no HTML5 capabilities or if it can't handle the used codec, it will fall back on the native <object> behaviour (in general... the browser will look for a plugin like VLC, or so on...)

And if there is no way for playing the video (no plugin for it), the alternative content provided inside the <object> tag will be used.

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.