Member Avatar for 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.

  • 8 Contributors
  • 10 Replies
  • 373 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Ashley_9

Dani AI

Generated

Short, focused update linked to the thread history and current best practices.

As and hinted, inconsistent playback is usually not an HTML tag bug but a combination of encoding/container choices and server behavior. The old Flash fallback advice in this thread is now obsolete — Flash reached end-of-life and is no longer a viable fallback. (learn.microsoft.com)

A modern, robust approach is to stop relying on many static fallback files and use a player + adaptive streaming pipeline: a player framework (Video.js was suggested by ) combined with HLS/DASH (HLS plays natively in Safari; non‑Safari browsers can use a small MSE-based shim like hls.js). This avoids shipping many separate files and gives adaptive bitrate, buffering and better cross-device playback. (videojs.org)

Practical checklist (most common causes seen in old and new threads):

  • Server headers: correct Content-Type for the container, support for Range requests and return of HTTP 206 Partial Content (needed for seeking/progressive playback). (developer.mozilla.org)
  • Cross-origin: media served from another origin must include CORS headers or the <video crossorigin> behavior will be restricted. (Check network/response headers.) (developer.mozilla.org)
  • File layout: move MP4 metadata (moov atom) to the front so browsers can start playback before full download. Example ffmpeg commands (safe remuxing, no re-encode for MP4; re-encode shown for quality control):
# faststart (move moov atom)
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4

# re-encode to H.264 (web-friendly) and webm (VP9)
ffmpeg -i source.mov -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k -movflags +faststart out.mp4
ffmpeg -i source.mov -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -b:a 64k out.webm

For debugging: check the browser console and Network tab, test a Range request (for example curl -I -H "Range: bytes=0-1" https://example/video.mp4) and confirm the server returns Accept-Ranges: bytes and 206 Partial Content. If the file fails in one browser but works in others, try serving the same encoded file through a simple static server (to eliminate server config issues) or test playback with a Video.js + hls.js demo first. (developer.mozilla.org)

Summary: the path that gives the best long-term compatibility is: prepare web-optimized files on ingest (faststart, sane keyframe interval), serve with correct headers and CORS, and use a small player + adaptive streaming layer rather than older Flash/object fallbacks.

Recommended Answers

All 10 Replies

Member Avatar for FaisalSarfraz

Can you share code that you are trying?

Member Avatar for AceStar

Try with Video.js.

Member Avatar for 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

Member Avatar for ComNaD 
 <video class="empvid" controls preload="none" poster="../img/myvideo.jpg">
        <source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="" type='video/ogg; codecs="theora, vorbis"'>
        <source src="http://www.example.com/media/myvideo.webm" type="video/webm">
</video>
commented: The HTML 5 way to do video +0
Member Avatar for 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.

Member Avatar for Khalilur_1

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

Member Avatar for 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.

Member Avatar for aaronplo

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

Member Avatar for Ashley_9

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

Member Avatar for 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>
Edited by Ashley_9
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.