Search jQuery

jQuery Forum

Using jQuery

gellabmatt

html5 video, jQuery, and firefox

in Using jQuery • 12 years ago

The first two go so well together, but firefox is kicking up a fuss.

my main problem is that I have created sort of a html5 video playlist with about 16 videos.

you click on one of the listed links, the ul fades out, the video fades in and starts playing.

This part works just fine.

Then to get out of the video there is a little close button in the top right of the playlist area.

This uses .remove() to remove the video out of the DOM after it fades out and the menu fades back in.

It works fine in Chrome and Safari (you know GOOD browsers), but firefox being the MSIE second coming doesn't seem to respond to the .remove() call for the video; although it does fade out the video and fade back in the menu as it should.

Any ideas anyone?

Please don't tell me this is just an html5/firefox issue.

Thanks!

Replies(4)

addyosmani

Re: html5 video, jQuery, and firefox

12 years ago

Could you post a link to the code so that we can take a look at what's going on?. This would allow us to be of greater assistance in helping you solve the problem.

- Addy

gellabmatt

Re: html5 video, jQuery, and firefox

12 years ago

Sure.

Here it is :

$(document).ready(function()
{
//init settings
$('#close-btn').css({'visibility' : 'hidden'});
});
//typography for video menu
$('#vid ul li:odd').css({'text-align' : 'right'});
//set up selection class for videos
$('#vid ul li a').click(function() {
$(this).addClass('selected');
});
//set up close function on close-btn
$('#close-btn').click(function() {
//fade in the video and the close button
$('#vid video').animate({opacity : 0}, 1000);
$('#close-btn').animate({opacity : 0}, 1000);
//fade out menu
$('#vid ul').delay(500).animate({opacity : 1}, 1000);
//remove selected class from just watch li a
$('#vid ul li a').removeClass('selected');
//remove video from dom
$('#vid video').remove();
});
});
function getVideo()
{
var fileExt;
var string;
var filename;
//detect browser and match proper extension
if($.browser.mozilla)
fileExt = '.ogg';
else if($.browser.msie)
fileExt = '.mp4';
else if($.browser.opera)
fileExt = '.ogg';
else if($.browser.safari)
fileExt = '.mp4';
//grab filename from html and grab file from server
string = $('#vid .selected').text();
filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
//fade out menu
$('#vid ul').animate({opacity : 0}, 1000);
//get video
$('#vid').append('<video width="640" height="480" controls autoplay><source id="content" src="work/video/' + filename + fileExt + '" /></video>');
//fade in the video and the close button
$('#vid video').delay(500).animate({opacity : 1}, 1000);
$('#close-btn').delay(500).css({'visibility':'visible'}).animate({opacity : .6}, 1000);
}
</script>
</head>
<body>
<div id="vid">
<h1>Erin Foote's 8mm Stories</h1>
<ul>
<li><a href="javascript:getVideo();">Yacht</a></li>
<li><a href="javascript:getVideo();">pink</a></li>
<li><a href="javascript:getVideo();">he cared</a></li>
<li><a href="javascript:getVideo();">footerexia</a></li>
<li><a href="javascript:getVideo();">the answer</a></li>
<li><a href="javascript:getVideo();">yummy</a></li>
<li><a href="javascript:getVideo();">teeth</a></li>
<li><a href="javascript:getVideo();">moms</a></li>
<li><a href="javascript:getVideo();">i am smiling</a></li>
<li><a href="javascript:getVideo();">head over heals</a></li>
<li><a href="javascript:getVideo();">presents</a></li>
<li><a href="javascript:getVideo();">the shoes and tattoos remain</a></li>
<li><a href="javascript:getVideo();">the doctor</a></li>
<li><a href="javascript:getVideo();">acting art director</a></li>
<li><a href="javascript:getVideo();">the sound they made</a></li>
<li><a href="javascript:getVideo();">the reason</a></li>
</ul>
<canvas id="close-btn">x</canvas>

So yeah like I said its the remove function on line 30 that firefox doesnt seem to want to handle.

Thanks!

gellabmatt

Re: html5 video, jQuery, and firefox

12 years ago

anyone know why my last post was reported as spam?

Kevin B

Re: Re: html5 video, jQuery, and firefox

12 years ago

spam filter picked up on something in the post

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

Top Reply

Response title

Attachments

jQuery Forum

html5 video, jQuery, and firefox

Replies(4)

Re: html5 video, jQuery, and firefox

Re: html5 video, jQuery, and firefox

Re: html5 video, jQuery, and firefox

Re: Re: html5 video, jQuery, and firefox

Statistics

Tags

Actions