CODEWITHSUNDEEP
csshtml
Pedro Magalhaes
Pedro Magalhaes

Reputation: 55

Html5 video problems

I've been getting a problem with html in my presentation video:

The video keeps paralyzed, until its fully loaded, and then start to play.

In some browsers it works, others do not. Can someone help me to fix it?

HTML

<div class="videoContainer">
<video autoplay loop preload='auto'>
<source src="video/Rio_Energy_Apresentacao.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Video não suportado.
</video>
</div>

CSS

.videoContainer
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video
{
    min-width: 100%;
    min-height: 100%;
}

Live site: http://ec2-54-71-170-71.us-west-2.compute.amazonaws.com/

Upvotes: 0

Views: 1193

Answers (2)

Sanket Karve
Sanket Karve

Reputation: 63

Reffer to Media formats to understand which browser support media format.
You can specify multiple source files. Reference from HTML5Rocks
The source element lets you specify multiple formats as a fallback in case the user's browser doesn't support one of them.
Example:

<video controls>
   <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
   <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

Upvotes: 1

asonnenshine
asonnenshine

Reputation: 235

For HTML5 video, you will want to create three formats of the video: webm, mp4, and ogg. Most browsers will use the MP4 but other browsers will require one of the other formats (this would explain why it doesn't work for some users).

<video>
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

It also should be noted that the order of these formats is important; always declare the webm format first in the list (primarily a Chrome issue).

Finally, the codecs used in the formatting of the videos can play a role in the browser compatibility. I've successfully used the app Miro Video Converter to do my conversions and it seems to have the correct codecs available.

Upvotes: 1

Related Questions