Skip navigation
Vanessajw
Currently Being Moderated

inserting video for safari, firefox and ipad

Mar 15, 2013 10:31 AM

I tried with great care to encode the two files, mpeg4 for safari and ipad/phone and chrome

which worked fine, then I tried adding the detailed coding (another source file) for the ogv file for firefox users as

instructed by adobe on utube. But when I added the extra coding with the source file the

ipad lost the sound on the video and firefox didn't play it at all, although it played fine on the test

browser firefox and it had the firefox logo which looked good.

So in the end I reverted back to the original mpeg4 only file and then put the video onto my facebook

and embedded the code from there. That works......but it's a bit untidy having two videos on the page,

but I think it's safer all round.

 

But I had hoped to have the files viewable only from my website and not via facebook really.

The thing that bugs me is that it should have worked with their encoding and it didn't quite work in practise.

http://www.youtube.com/watch?v=0WzKn9RRtGA

 

So it's one thing to have a great tutorial but it didn't actually quite work, nearly, but not good enough for my computer.

 

arrh, any ideas you experts....?

 
Replies
  • Currently Being Moderated
    Mar 15, 2013 11:06 AM   in reply to Vanessajw

    HTML5 video typically requires multiple file types for various browsers & web devices (ogg, webm, mp4 and flv fallback for mozilla browsers).  This can be quiet tedious and requires extra bandwidth to support the various files. 

     

    If you don't want to mess with this, look at Pickle Player.  It supports all web devices/browsers with one file type and can be configured to support playlists with video, audio and poster frames.

    http://www.pickleplayer.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 11:13 AM   in reply to Nancy O.

    It "may" also be something as simple as a missing MIME type on your server...

     

    http://support.mozilla.org/en-US/questions/765669

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 1:20 PM   in reply to Jon Fritz II

    Pickle Player does fix this.

     

    But for those who are interested in "Manual Labor" here's what you put into your .htaccess file on your server:

     

    AddType audio/ogg .oga

    AddType video/ogg .ogv

    AddType application/ogg .ogg

    AddHandler application-ogg .ogg .ogv .oga

     

    Some servers will let you add MIME types through their Control Panels, but this is really fast through Dreamweaver if you download the file, add these lines of code and then upload it. Some versions of Dreamweaver don't know what to do with the file, but you can right-click and do an "Open with>Dreamweaver" to get it done.

     

    Here is a page that has all of the types of video that will work with all browsers. It's HTML5, so the <video> tag works. I use Miro Video Converter (for OS X) and Quicktime Pro to do the transcode to the various file types that are supported in HTML5. If you look at the code, you'll see .mp4, .ogv and .webm (VP8) are all called within the code.

     

    First time I did this, I couldn't figure out why the video did not play in FireFox. And I think that Mozilla.org is very smart to insist on a codec that simply will never be proprietary. I got in touch with the Mozilla people and they are the ones who told me that I didn't have my server set up to serve that MIME type as a binary stream (and not an ASCII file).

     

    That is, essentially what you are doing when you add the MIME type. The file will be downloaded as an ASCII (text) file if you don't tell your server it's binary.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 4:30 PM   in reply to Vanessajw

    Firstly, relax. Test your pages first on your own computer with Firefox, Chrome and Safari. If It works in Safari, it will work with iPad, unless it is Flash -- and Miro can target iPad/iPhone.

     

    With respect to .htaccess, yes. Insert those lines below any other lines in your .htaccess file. Then upload it to the server.

     

    Go to the page I linked in my last message. Tell your browser to show you the sourcecode -- there is NOT a lot of stuff on that page, so you will find the  tag easily.

     

    Copy everything I have done, but refer to the actual filenames of your videos.

     

    I do realize you are trebling your storage requirements, but I don't think that should be significant -- if you are using a hosting company that limits your storage, then you need to find a new one.

     

    If you copy my code and add your own .JPG file for a still picture and it should work.

     

    ___

    "A discriminating irreverence is the creator and protector of human liberty."

    - Mark Twain

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 16, 2013 9:05 AM   in reply to Vanessajw

    The reason why Firefox is not playing back the video is because Firefox will not play .mp4 or .m4v files. According to Mozilla, these file formats may not be supportable in the future because the Mozilla Foundation may need to pay a licensing fee for support.

     

    The ONLY file types that Firefox will play back are .webm (vp8) and ogg with the Theora video codec and the Vorbis audio codec. That's it. This is why I place .mp4, then .ogv, then .webm in that order in my code and then upload all three. For Mozilla support you need to read their requirements to understand why. I think you could get away with just .mp4 and .webm, but I include .ogv just in case someone has an outdated browser.

     

    Where is your website? Give me a link and I will try to figure this out for you.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 16, 2013 11:00 AM   in reply to Vanessajw

    Vanessa, Firefox is confirming that you do not have your server set up to play the .ogv file with the following:

    Firefox-MIME.png

    So you need to edit your .htaccesss file just as I descried above, and make sure that you have the .ogv file uploaded to your server.

     

    I do realize it's a blank piece of paper icon, but you can right-click on that file and open it with Dreamweaver. You can also have your compter always associate .htaccess files with Dreamweaver if that suits you.

     

    Add he lines from my repliy above to the bottom of your document and you will be able to play the video in Firefox.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 16, 2013 12:12 PM   in reply to Vanessajw

    I might have the cause of your audio problem here, if your iPad is using an earlier version of iOS. From this article, Note: Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later, on all devices.

     

    Also, when you encoded your .MP4 file (which is what iOS devices will want to play) you should be aware of the following:

     

    Safari on iOS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.

     

    Safari on iOS (including iPad) currently supports MPEG-4 video (Baseline profile) and QuickTime movies encoded with H.264 video (Baseline profile) and one of the supported audio types.

     

    iPad and iPhone 3G and later support H.264 Baseline profile 3.1. Earlier versions of iPhone support H.264 Baseline profile 3.0.

     

    So double-check your encoding process when you are making your initial files.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points