html5 video embedding - need help

[Khalilur_1]

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.

[FaisalSarfraz]

Can you share code that you are trying?

[AceStar]

Try with Video.js.

[ComNaD]

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

[ComNaD]

 <video class="empvid" controls preload="none" poster="../img/myvideo.jpg">
        <source src="http://www.example.com/media/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="http://www.example.com/media/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="http://www.example.com/media/myvideo.webm" type="video/webm">
</video>

[veedeoo]

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.

[Khalilur_1]

Thank you for giving idea. Do you have example with code?

[asimegusta]

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"><!
                [endif]-->
  <!-- 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">
                    <!--<![endif]-->
                    <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]><!-->
                </object><!--<![endif]-->
         </video>

Hope that helps.

[aaronplo]

You can easily make a custom html5 video at bytecrank.com in about a minute. hope this helps!

[Ashley_9]

And what the html 5 player do you use?
flow palyer, uppod other? .....

[Ashley_9]

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="********************"
 data-setup="{}">
 <source src="********************" type='video/mp4'>
</video>