CODEWITHSUNDEEP
htmlvideo
argh
argh

Reputation: 143

html5 video element didnt display

I've got some stupid problem... Simple code:

<div id="start">
    <video width="320" height="240" controls>
        <source src="Content/movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

on my project is not working. The video isn't displying, the path is correct... Div start has no special styling and for video is just set width and height as above.

When i checked example on http://www.w3schools.com/ everything works, when i check my browsers support for video it's all ok. And more funnier thing, that when i download the video than its downloading my proper video....

Upvotes: 0

Views: 117

Answers (1)

Geppettvs D&#39;Constanzo
Geppettvs D&#39;Constanzo

Reputation: 201

Ok, after some testing I can see your video on Mozilla Firefox but your video won't run in Google Chrome nor Internet Explorer. The situation you are facing is based on file formats. Each web browser will require a certain file format for your video, thus you will need to encode your video in several formats in order to make the video available for a wider range of visitors, depending on their browser.

The Wikipedia explains which file formats will better fit the needs of each web browser in the Browser support Section of the HTML5 video tag.

The proper application of the <video> tag in your code would look like this:

<video poster="movie.jpg" controls>
        <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Considering that you should supply individual video files for each instance of the sources inside the <video> tag.

Remember that your fallback content can also be an image, animated gif, a flash animation or even a youtube code (properly formatted) which will result in something being shown to the user if nothing works. Don't forget to include the measurements: fixed width and height in order to the fallback media fill the whole space where the video should show.

For your transcoding procedure, I suggest you to have a look at This answer in the AskUbuntu site where I explain how to compress your files with ease by using the Mobile Media Converter by Miksoft software.

I hope this help you but if you need further assistance don't hesitate to drop a comment.

Good luck!

Upvotes: 1

Related Questions