Hi, I am new in web designing, but freequetnly facing problem with embedding video in my html5 web site. It is browers problem also. If chrome show, internet explorer does'nt show.
I am looking for standard embeding code what will help me show my video on all major browsers.

4 Years
Discussion Span
Last Post by Ashley_9

It probably has to do with the encoding. I have a bit about it in a blog at http://blog.comnad.com/ More browsers are actually coming around to be more standard. For a while using the Video tag in HTML5 we had to have three videos, the video/mp4, the video/webm and the video/ogg to be sure it played in Firefox. Safari, IE, Chrome and Opera. I also included an iframe for old versions of IE. Chrome and Firefox are starting to play nicer now though. Check into using modernizer to standardize, too


The problem with the HTML5 is that not all browsers support the same video codec. Because of this, you will have to encode two to three different video formats to support common browsers. This will take more space.

What I can suggest is to use the .mp4 video and deliver it through jwplayer or flowplayer so that if the browser does not support it, the player will go on to the fallback mode which is the flash player loading the mp4 video file. Most mobile supports mp4 videos.

Besides, html5 video is still pretty new. It hasn't even address the security issue, live streaming, and few other limitations. One stumbling block that you will be encountering as your site gets bigger is the video conversion on the server. Unless, you will have a powerful server to utilize ffmpeg in converting one video to three different wrappers e.g. ogg, mp4, webm, flv.


Here's an example of code to embed an html5 video element:

<video class="video-left" width="240" height="196" controls="controls" muted="muted">
  <source src="med/playa.mp4" type="video/mp4"/>
  <source src="med/playa.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- other browsers -->
   <!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime
 and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE -->
                <!--[if gt IE 6]>
<object width="240" height="196" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  <!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to see the HTML whilst being compatible with serving as XML -->
   <!--[if !IE]><!--><object width="240" height="196" type="video/quicktime" data="med/playa.mp4">
                    <param name="src" value="playa.mp4" />
                    <param name="showlogo" value="false" />
                    <param name="autoplay" value="false" />
                    <!-- fallback to Flash -->
 <object width="240" height="196" type="application/x-shockwave-flash" data="med/FlareVideo.swf?image=med/playa.jpg&amp;file=med/playa.mp4">
                        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
 <param name="movie" value="med/FlareVideo.swf?image=med/playa.jpg&amp;file=med/playa.mp4" />
 <!-- fallback image. download links are below the video. warning: putting anything more than the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play -->
 <img src="med/playa.jpg" width="240" height="196" alt="la playa" title="" />
                    </object><!--[if gt IE 6]><!-->

Hope that helps.


Video on my Site

<link href="********************" async defer rel="stylesheet">
<script src="********************" async defer></script>  

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
 preload="auto" width="100%" height="300" poster="********************"
 <source src="********************" type='video/mp4'>

Edited by Ashley_9

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.