Databases
StackOverflow2013
Postsdbo
POhtml5 video and firefox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml5 video and firefox
    primarykey
    data
    text
    <p>So, I created a nice little html5 video player with a playlist and some jQuery transitions between the playlist view and the video view. It works great in Chrome/Safari. However, firefox is a different story. All the jQuery business works just fine; however, the videos do not display. Rather, I am left with a grey-x. I've tried switching from straight ogg to ogv format which does not work either.</p> <p>When I go straight to the file the browser attempts to download it rather then play it. I saw a similar post on this forum where it was a problem with the MIME settings and he fixed it somehow. I'm not sure if that is the same problem for me - so a little help would be muchly appreciated.</p> <p>You can check it out <a href="http://erinfoote.com/8mm.html" rel="nofollow">here</a></p> <p>Here is the entire code for the page; including all jQuery functions.</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Erin Foote \\ Copywriter - 8mm Stories&lt;/title&gt; &lt;link rel="stylesheet" href="main.css" type="text/css" media="all"&gt; &lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { //init settings $('#close-btn').css({'visibility' : 'hidden'}); //$('#preLoader').css({'visibility' : 'visible'}); //-------Text-to-Image Replacement-------\\ //replacing h1 and h2 with coresponding images //using different replace method to keep client name/occupation SEOed $('#menu h1').each(function() { string = $(this).text(); filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); $(this).html('&lt;img src="images/header-' + filename + '.png" /&gt;') $('#vid h1').css({ 'position' : 'relative', 'top' : '-20px' }); }); //typography for video menu $('#menu ul li:odd').css({'text-align' : 'right'}); //set up selection class for videos $('#menu 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/title $('#menu').delay(500).animate({opacity : 1}, 1000); $('#menu').css({'visibility' : 'visible'}).delay(500).animate({opacity : 1}, 1000); //remove selected class from just watch li a $('#menu ul li a').removeClass('selected'); //remove video from dom $('#videoCont video').remove(); }); }); function getVideo() { var browser; var fileExt; var string; var filename; //detect browser and match proper extension if($.browser.mozilla) { browser = 'gecko'; fileExt = 'ogv'; } else if($.browser.msie) { browser = 'trident'; fileExt = 'mp4'; } else if($.browser.opera) { browser = 'presto'; fileExt = 'ogv'; } else if($.browser.safari) { browser = 'web-kit'; fileExt = 'mp4'; } //grab filename from html and grab file from server string = $('#menu .selected').text(); filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); //fade out menu/title $('#menu').animate({opacity : 0}, 1000); //get and place video video //(seeing that gecko browsers don't handle the expanded video tag well // and webkit browsers dont seem to handle the shorter video tage // we must find out which browser the user is using and append the right video tag and info if(browser == 'gecko') { $('#videoCont').html('&lt;video width="640" height="480" src="/work/video/' + filename + '.' + fileExt + '"&gt;&lt;/video&gt;'); } else { $('#videoCont').html('&lt;video class="preload" width="640" height="480" controls="" autoplay="autoplay"&gt;&lt;source src="work/video/' + filename + '.' + fileExt + '" type="video/' + fileExt + '"&gt;&lt;/video&gt;'); } //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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;video src="acting-art-director.ogv" type='video/ogg; codecs="theora, vorbis"'&gt; your browser does not support the video tag &lt;/video&gt; &lt;div id="vid"&gt; &lt;div id="menu"&gt; &lt;h1&gt;8mm Stories&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;Yacht&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;pink&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;he cared&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;footerexia&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;the answer&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;yummy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;teeth&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;moms&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;i am smiling&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;head over heals&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;presents&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;the shoes and tattoos remain&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;the doctor&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;acting art director&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;the sound they made&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:getVideo();"&gt;the reason&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a href="index.html" class="home"&gt;home&lt;/a&gt; &lt;/div&gt; &lt;div id="close-btn"&gt;x&lt;/div&gt; &lt;div id="videoCont"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="girl"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thanks for any and all help!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMeanMatt
    1. USMeanMatt
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODoes the .ogv video play in Firefox without the jquery? That should indicate if it is a server configuration problem.
      singulars
      1. POhtml5 video and firefox
      1. UScbeer
    2. COI'd encourage you to check out some of the existing html5 video javascript libraries <http://praegnanz.de/html5video/index.php>, which may help with browser compatibility, flash fall-back, and other issues.
      singulars
      1. POhtml5 video and firefox
      1. UScbeer
    3. COCan you give an example url of one of the ogg video files? I'm not seeming to get one offered when I visit the site you linked to.
      singulars
      1. POhtml5 video and firefox
      1. USsdwilsh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload