HTML 5 video and firefox

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

Hi I have read the stuff on html 5 and video tag but I can not get it to work on firefox 3.6.4 it works fine in safair 5 can someone take a look and let me no what i am doing wrong?

My site: http://web.me.com/soboku1/joey/stuff.html
here is the code I am using.

<html>

<head>

<title></title>

<script src="http://web.me.com/soboku1/zencoder/video.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

// If using jQuery

// $(function(){

// VideoJS.setup();

// })

window.onload = function(){

VideoJS.setup();

}

</script>

<link rel="stylesheet" href="http://web.me.com/soboku1/zencoder/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">

</head>

<body id="body">

<div class="video-js-box">

<video id="video" class="video-js" width="340" height="264" poster="URLtoPreviewImage.png" autobuffer>

<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.mp4" type="video/mp4">

<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogv" type="video/ogg">

<object width="340" height="264" type="application/x-shockwave-flash"

data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">

<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

<param name="allowfullscreen" value="true" />

<param name="flashvars" value='config={"clip":"http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.swf"}' />

<img src="URLtoPreviewImage.png" width="340" height="264" alt="Poster Image" title="No video playback capabilities." />

</object>

</video>

</div>

</body>

</html>

Thank you for any help you can give me.
joey

iWebFAQ · **Posted:** Mon Jun 14, 2010 12:32 am

Hi Joey,

I don't really know what's causing it but you could start by removing the spaces in your file's name and replace them with underscores _ instead. Spaces in filenames on the web are causing quite a lot of trouble and should be avoided. So change

OMG cat meets the Dramatic Lemur.mp4

to

OMG_cat_meets_the_Dramatic_Lemur.mp4

same for the other movie files. Once you change the name of the files also change it in the code. Whether that's what is causing the problem or not I currently can't tell. Try it.

Regards,
Cédric

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

No thats not it I tried it and it made no diff.

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

I wounder if its cause iweb uses iframes?

iWebFAQ · **Posted:** Mon Jun 14, 2010 9:21 pm

soboku1 wrote:

I wounder if its cause iweb uses iframes?

Hi,

in fact the problem in the code above turned out to be the .ogv extension. It needs a .ogg extension to work in Firefox. This was all my fault sorry.

Replace the .ogv with .ogg in the file and in the code and it should work in Firefox (at least it does for me).

Sorry,
Cédric

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

I did try that but still not working, all I get is a box with an X in it. here is the code i am using. Now that I look at it shouldn't the DOCTYPE for html 5 be just DOCTYPE and not all the rest? iweb is putting this in as html 4 also I not sure if mobileme servers have the ogg mine type in the .htaccess file or not. most likely not since apple is not for true open source. what do you all think?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title></head><body>
<video width="450" height="375" controls preload="auto">
<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.mp4" type="video/mp4" />
<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogg" type="video/ogg " />
</video>

<p>
<strong>Save Video As:</strong>
Closed Format: <a href="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.mp4">"MP4"</a>
Open Format: <a href="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogg">"OGG"</a>

</p></body></html>

iWebFAQ · **Posted:** Tue Jun 15, 2010 6:56 pm

It works for me in Safari and Firefox. Check this page in the two browsers:

http://iwebfaq.org/test/Blank_28.html

username=username
password=password

I pasted the code I used on the page.

For me it works when I put your OMG cat meets the Dramatic Lemur.ogg on my server
http://iwebfaq.org/OMG cat meets the Dramatic Lemur.ogg
but it doesn't work when I use the one on your MobileMe account
http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogg

The picture with the question mark in Safari is only displaying because of URLtoPreviewImage.png wasn't changed in the code I used.

Anyway do you see it working in the above mentioned page too?

Really strange that it doesn't work by entering the path to the ogg on your server
http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogg
I mean it's the same file. To me it looks like you're right in that the ogg isn't included in MobileMe's server settings. Really really strange anyway...

Have a nice day,
Cédric

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

Well I switch to a the jw player using the html 5 code and it still does not work however, after finding a code to check for errors it not works. Not sure what the code is doing I think its letting the flash player take over and play the video witch its suppose to do anyway on its own but does not. But its working with this code. May not be the best way but for now till i learn more about html and or someone enlightens me on whats the problem is and helps fix it all just have to stay with this.

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://web.me.com/soboku1/mediaplayerhtml5beta/jquery.js"></script>
<script type="text/javascript" src="http://web.me.com/soboku1/mediaplayerhtml5beta/jquery.jwplayer.js"></script>
</head>

<video id="player" width="480" height="270"
<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="http://web.me.com/soboku1/media/OMG cat meets the Dramatic Lemur.ogg" type="video/ogg; codecs='theora, vorbis'"
onerror="fallback(parentNode)">
...
</video>
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes())
video.parentNode.insertBefore(video.firstChild, video);
video.parentNode.removeChild(video);
}
</script>

<script type="text/javascript">
$('#player').jwplayer({
flashplayer:'http://web.me.com/soboku1/mediaplayerhtml5beta/player.swf',
skin:'http://web.me.com/soboku1/mediaplayerhtml5beta/five/five.xml'
});
</script>
</html>

eddierosenthal · **Joined:** Sat Jul 10, 2010 7:15 pm **Posts:** 1

make sure your mime types are either in your apache server or in your .htaccess codes.
example of .htaccess with mime types -
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .m4v
AddType video/webm .webm
i also put this in the directory where i am storing the media files themselves...
hth!
eddie

soboku1 · **Joined:** Sun Jun 13, 2010 7:01 pm **Posts:** 6

Well I can't control Apples servers so if they are not encluding all the mind types there is little I can do about it excpet to not renew my mobile me account. Does some one have steve jobs email addy I'll write him and ask. I heard in a rumor that Google might be doing a "ME" thing. Don't no if that is true kinda hope so. Anyway my home page is no where ready for viewing I am just testing out different things and having fun learning.