CODEWITHSUNDEEP
htmlvideohtml5-video
Simon Carlson
Simon Carlson

Reputation: 1989

Making video tag play in all browsers

I have a video tag looking like this:

<video width="380px" height="190px" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

This plays the video in Firefox and Chrome. However, IE9 and 10 simply states unreadable source (the video 'box' itself turns up so the tag is supported). Safari doesnt seem to support the video tag and thus I only see my fallback message. However, if I go to the URL directly in any browser I can watch the movie in Firefox + Chrome and download it in IE + Safari.

What should I do to make the video playable in all browsers?

Upvotes: 0

Views: 4406

Answers (2)

dKen
dKen

Reputation: 3127

I usually have four versions of the same video for cross-browser compatibly:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    <object data="movie.mp4" width="320" height="240">
        <embed src="movie.flv" width="320" height="240">
    </object> 
</video>

.mp4, .webm, .ogv, and a flash fallback .flv. This has worked well for me cross-browser. Another thing to note is that for mobile, a higher-optimised .mp4 video is more likely to work (I've had issues with this in the past).

Upvotes: 0

Justin Bollinger
Justin Bollinger

Reputation: 11

Add this line in your head somewhere. <script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

Also try putting your source in the opening video tag.

<video source src="movie.mp4" type="video/mp4" width="380px" height="190px" controls></video>

Hope fully that helps

Upvotes: 1

Related Questions