HTML5 Video problems

Discussion in 'Web Design and Development' started by 76ShovelHead, Jun 26, 2012.

  1. 76ShovelHead, Jun 26, 2012
    Last edited: Jun 26, 2012

    76ShovelHead macrumors 6502a

    76ShovelHead

    Joined:
    May 30, 2010
    Location:
    Florida
    #1
    Okay, I am having a problem where locally, the video on the site I am making will load. However, when pushed to my school server, and accessed over the internet, the video will not play except in Safari??

    Heres what it looks like.
    Code:
    <video controls width="350" autoplay="yes">  
    <!-- if Firefox -->  
    <source src="media/intro.theora.ovg" type="video/theora.ogv" />  
    <!-- if Safari/Chrome--> 
    <source src="media/intro.mp4" type="video/mp4" />  
    <!-- Fallback -->  
    <embed src="media/intro.flv" type="application/x-shockwave-flash" width="350" height="250" allowscriptaccess="always" allowfullscreen="true"></embed>  
    </video
    
    And just in case anyone is wondering, yes I have uploaded the videos to the server :D

    It will just display an empty player in Safari/Chrome.

    What am I doing wrong?

    EDIT:
    It wont even load in safari from the server.
    It loads across all my browsers except Firefox locally, however.
     
  2. eddyg macrumors 6502

    Joined:
    Sep 5, 2003
    Location:
    Christchurch, New Zealand
    #2
    Consider using a js player like projekktor to make your life easier. Ensure that you have optimized your MP4 to have the metadata at the front of the file, else when viewed over a WAN it will appear to hang since it has the buffer the whole file prior to play.

    Use the console on the browser to see what is going on, ensure that it is goin out to get the file.

    Also, ensure you encoded the MP4 with settings that will work on all your target devices.

    Cheers, Ed.
     
  3. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #3
    Just to double-check: your media is all in the right place? It's in media/ and not /media/ or something?

    Is your server definitely set up to serve the videos with the correct MIME types? I think I had to add video/mp4 to my .htaccess file before.

    I had a problem recently where video would play everywhere but in Firefox, and it ended up being that the audio was 48kHz because I forgot to resample to 44.1. Once I fixed that it was fine.
     
  4. DrewQc macrumors newbie

    Joined:
    Jun 28, 2012
    #4
    You have to put in first place the Safari tag, it's a known bug with Safari.

    <video controls width="350" autoplay="yes">
    <!-- if Safari/Chrome-->
    <source src="media/intro.mp4" type="video/mp4" />
    <!-- if Firefox -->
    <source src="media/intro.theora.ovg" type="video/theora.ogv" />
    <!-- Fallback -->
    <embed src="media/intro.flv" type="application/x-shockwave-flash" width="350" height="250" allowscriptaccess="always" allowfullscreen="true"></embed>
    </video>
     
  5. WesCole macrumors 6502a

    Joined:
    Jul 1, 2010
    Location:
    Texas
    #5
    You probably have already fixed this, but I noticed this line:

    <!-- if Firefox -->
    <source src="media/intro.theora.ovg" type="video/theora.ogv" />

    The first extension is "ovg" when it should be"ogv". Just thought that might help. :)
     
  6. morespce54, Jul 16, 2012
    Last edited: Jul 16, 2012

    morespce54 macrumors 65816

    morespce54

    Joined:
    Apr 30, 2004
    Location:
    Around the World
    #6
    You *will* need to have (or add, if it's not already there) the "video/mp4", "video/ogg" (theora) and "video/webm" (vp8) MIMEs in your ".htaccess" file for the server to be able to play it. That is why the videos play fine on your local computer but not on your server. Your server needs to know that such MIME types even exist!

    Likely, you won't have access to that file on your school server (unless your a system admin and have a complete access to the whole server, not just the "html" folder).

    You best luck is:
    a) ask the sys admin if they can add those MIME types to that file (it's no big job but often, sys admins don't want to muck around this file for no "good" reason) or
    b) use some other servers that can read those MIME types to store those videos and change the src to that server or
    c) use a js player (here, here or here, or any other that fits you) since you already seems to rely on a Flash video fallback...
     

Share This Page