Html 5 Video Not Working In All Browsers!

[aerisis83]

Hi My name is Deb, and I'm having a very difficult time trying to get this video to work on all platforms. I've converted the video to .webm .ogg /.ogv .mp4 and .m4v. But it's still not showing up in safari on either the mac or pc platform, loading slowly in firefox on both, and not showing up at all in chrome. Here's the code i'm using:

 

<video width="1000" height="768" style="width: 100%; height: 100%;" autoplay preload="auto" poster="shot0007.jpg">

<source src="serendipity.mp4" type="video/mp4" />

<source src="serendipity_VP8.webm" type="video/webm" />

<source src="serendipity_libtheora_008.ogv" type="video/ogg" />

<source src="serendipity.m4v" type="video/mp4" />

</video>

 

also here's the link to the site: talentandproductions.com

 

any help would be greatly apppreciated!!

[Wickham]

Will this Safari tutorial help?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

You have used

<source src="serendipity_libtheora_008.ogv" type="video/ogg" />
<source src="serendipity.m4v" type="video/mp4" /> 

 

I use .oggv type="video.ogg" and I haven't noticed a problem, but I haven't used .m4v I just use .mp4 but you may be correct.

 

This page is for Safari

http://caniuse.com/#feat=mpeg4

This page is for all browsers

http://caniuse.com/#feat=video

so check each sub-feature link below the schedule

Edited January 10, 2013 by Wickham

[LSW]

HTML5 is not the official language yet, not until after 2014 most likely.

 

Although HTML5 is supported by most browsers, that does not mean every possible use of HTML 5 is supported as it is still in development.

 

So it is quite possible that some commands/tags/variables in HTML5 for video is not supported by all browsers, or that as wickham seems to suggest, some file formats or Codecs are not yet supported. It may even be an issue beyond HTML5 along that lines that a browser may not support a Codec.

 

Just something to keep in mind, I do not know for sure one way or the other, but there are many Codecs out there and I just thought of it when seeing the ".ogg" format mentioned in the code above. I have nothing on my PC that will play that format.

[aerisis83]

Will this Safari tutorial help?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

You have used

<source src="serendipity_libtheora_008.ogv" type="video/ogg" />
<source src="serendipity.m4v" type="video/mp4" /> 

 

I use .oggv type="video.ogg" and I haven't noticed a problem, but I haven't used .m4v I just use .mp4 but you may be correct.

 

This page is for Safari

http://caniuse.com/#feat=mpeg4

This page is for all browsers

http://caniuse.com/#feat=video

so check each sub-feature link below the schedule

 

Thanks I'll take a look at this and send feedback if it helped resolved the issue!!

[aerisis83]

HTML5 is not the official language yet, not until after 2014 most likely.

 

Although HTML5 is supported by most browsers, that does not mean every possible use of HTML 5 is supported as it is still in development.

 

So it is quite possible that some commands/tags/variables in HTML5 for video is not supported by all browsers, or that as wickham seems to suggest, some file formats or Codecs are not yet supported. It may even be an issue beyond HTML5 along that lines that a browser may not support a Codec.

 

Just something to keep in mind, I do not know for sure one way or the other, but there are many Codecs out there and I just thought of it when seeing the ".ogg" format mentioned in the code above. I have nothing on my PC that will play that format.

 

I've found that certain versions of the browsers are compatible with these codecs and but the same browser on a different platform isn't. Should I just avoid using HTML 5 to run this video? I want it to work on all browsers, but this seems to be a very tedious issue and i need something that works universally now.

[LSW]

That is hard to say until the issue is found.

 

The exact situation is this: After years of development HTML5 is on "last call" status last time I checked. This is basically the "We are pretty much finished, any last minute issues from you developers?" After some time at this they will close it out and work on any last tweaking that seems to be needed. Then it will be announced as finished and enter "Candidate" status. The final official folks will look at it and then a vote will be called for and it will be made the official standard replacing HTML 4.5.

 

So Browser companies are supporting it and many developers here are using it... it is likely to change very little from this point until it becomes the standard which is most likely late 2014 at best. Just imagine a car that works wonderfully but is only partly painted etc. missing detailing, stereo etc.

 

It is safe to use HTML5 and they are not likely to drop Video support. Nor likely to change or ad a tag name... but minor changes like support for a Codec for example is plausible even if not likely. But that is just an example and I do not know if HTML5 even cares about Codecs or file types.

 

That leaves us with the browser. The real weakness in web design for us developers has always been the browser developers. Look at it like language, I write "Color" and a Brit writes "colour", US American place a comma outside a qouote "bla bla", while a european uses it inside "bla bla bla,", US American "gift" is a present while German "gift" is poison.

 

So to a team of developers can read the same official declaration of the standards, yet either understand or choose to do something differently. A classic example is the alt attribute. Netscape/Firefox/Opera/Safari do not show the alt attribute text as it is meant as alternative text to a photo... alternative being the key word. IE developers either chose or understood it differently and showed the alternative text as a bubble like the title attribute. Wrong? Different? Who can really say?

 

Short answer is that browsers are made by humans who make mistakes or differ in opinions about what something means (Just look at the Mayan Calendar!). There will never be any guarantee that all browsers show all sites the same way regardless of what a standard says. You generally have to try to do the best you can and support as many browsers and platforms as possible, but 100% will never be likely.

[kralcx]

Hi My name is Deb, and I'm having a very difficult time trying to get this video to work on all platforms. I've converted the video to .webm .ogg /.ogv .mp4 and .m4v. But it's still not showing up in safari on either the mac or pc platform, loading slowly in firefox on both, and not showing up at all in chrome. Here's the code i'm using:

 

<video width="1000" height="768" style="width: 100%; height: 100%;" autoplay preload="auto" poster="shot0007.jpg">

<source src="serendipity.mp4" type="video/mp4" />

<source src="serendipity_VP8.webm" type="video/webm" />

<source src="serendipity_libtheora_008.ogv" type="video/ogg" />

<source src="serendipity.m4v" type="video/mp4" />

</video>

 

also here's the link to the site: talentandproductions.com

 

any help would be greatly apppreciated!!

 

 

The code below should get you going in the right direction:

 

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->

<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->

<video id="movie" width="1000" height="768" preload controls>

<!-- MP4 must be first for iPad! -->

<source src="serendipity.mp4" type="video/mp4"/><!-- Safari / iOS video -->

<source src="serendipity_vp8.webm" type="video/webm; codecs=vp8, vorbis" />

<source src="serendipity_libtheora_008.ogv" type="video/ogg; codecs=theora, vorbis" />

<!-- fallback to Flash: -->

<object width="1000" height="768" type="application/x-shockwave-flash" data="__FLASH__.SWF">

<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->

<param name="movie" value="_FLASH_.swf" />

<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />

<!-- fallback image. note the title field below, put the title of the video there -->

<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"

title="No video playback capabilities, please download the video below" />

</object>

</video>

<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->

<p> <strong>Download Video:</strong>

Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>

Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>

</p>

<!--small bit of script for the benefit of Android devices: -->

<script>

var v = document.getElementById("movie");

v.onclick = function() {

if (v.paused) {

v.play();

} else {

v.pause();

}

};

</script>

 

Read the comments for clarification. Basically you just needed to add a flash fallback and a script for android devices. Hope this helps.