4 Replies Latest reply on Oct 13, 2010 11:19 AM by David_Powers

    I could use some help with my html5 and my video

    dweinin

      Hello all.

       

      I've been reading up and working on my video issue for days.  I feel like I'm very close.  ANY help would be huge.

       

      I've got two websites.  Both of which have videos which my clients wants to be about to see on his mac, his PC and his iPhone and iPad.  He's a multi-platform guy living in a multi-platform world.

       

      The first website, has two videos on it.

       

      http://www.ftworthfoundation.com/index2.html

       

      It is very close to working... I can view all videos locally on safari and firefox.

       

      However remotely I cannot see any videos with firefox.

       

      Remotely- I can see all videos with Safari and IE and 1 video on the homepage with my iPhone.  My first thought on this was that the video which wouldn't play was too large.  I read somewhere that the iPHone will not load anything over 20MB... the .m4v was 33MB so I cut it down to about a 3rd of the size and re uploaded it (at 6.6MB) but it will still not play on my iPhone

       

      here is my code for the videos.  The video is formatted in .ogg, .mp4, .m4v and .flv... all videos are uploaded to the root directory.

       

      <div id=Video1>

           <video controls width=448>

              <source src="excel_Construction_Commercial.ogg" type="video/ogg" />

              <source src="excel_Construction_Commercial2.mp4" type="video/mp4" /> 

                  <source src="excel_Construction_Commercial.m4v" type="video/m4v" />

              <embed src="excel_construction_commercial.flv" type="application/x-shockwave-flash" width="448" height="249" allowscriptaccess="always" allowfullscreeen="true"></embed>

          </video>

          </div>

       

            <div id="VideoPlayer">

              <video controls width="448"> 

                  <source src="Foundation_Repair.ogg" type="video/ogg" />

      <source src="Foundation_Repair.mp4" type="video/mp4" /> 

                  <source src="Foundation_Repair.m4v" type="video/m4v" />

                <embed src="Foundation_Repair.flv" type="application/x-shockwave-flash" width=448 height="249" allowscriptaccess="always" allowfullscreeen="true"></embed>

              </video>

              </div>

       

      If anyone can help me on this I can probably tackle the 2nd website solo.


      Thanks guys.

       

      -D

        • 1. Re: I could use some help with my html5 and my video
          dweinin Level 1

          Anyone?


          I could really use some help with this.  I can list more code or information if it helps.


          Thanks

           

          Drew

          • 2. Re: I could use some help with my html5 and my video
            David_Powers Adobe Community Professional (Moderator)

            dweinin wrote:

             

             

             

                    <source src="excel_Construction_Commercial.ogg" type="video/ogg" />

            The filename extension for the video is wrong. It should by .ogv, not .ogg.

             

            <source src="excel_Construction_Commercial.ogv" type="video/ogg">

            1 person found this helpful
            • 3. Re: I could use some help with my html5 and my video
              dweinin Level 1

              Hi David.


              Thanks for the reply.  I am definitely moving the right direction.

               

              I have changed my extensions but the video will still not play remotely.  It does play locally.

               

              Here is my new code

                <video controls width="448">

                          <source src="Remodeling.mp4" type="video/mp4">

                          <source src="Remodeling.ogv" width="448" height="298" type='video/ogg; codecs="theora, vorbis"'>

                          <source src="Remodeling.m4v" type="video/m4v">

                          <embed src="Remodeling.flv" type=application/x-shockwave-flash wIDth="448" HeIGHT=249 alloWScRIPTACCESs="always" aLLOwfUllSCREeN=true></EmbEd>

                          </div>

               

              I'm thinking I have a MIME type issue as I read this article online.

              Here is a link

              http://diveintohtml5.org/video.html

              It's a great website for anyone looking to understand how to create and export video to html5.

               

              Anyway here is the section of article I'm interested in.

               

              What’s the proper MIME type? You’ve already seen it; it’s part of the value of the type attribute on a <source> element. But setting thetype attribute in your HTML markup is not sufficient. You also need to ensure that your web server includes the proper MIME type in the Content-Type HTTP header.

              If you’re using the Apache web server or some derivative of Apache, you can use an AddType directive in your site-wide httpd.confor in an .htaccess file in the directory where you store your video files. (If you use some other web server, consult your server’s documentation on how to set the Content-Type HTTP header for specific file types.)

               

              Can anyone tell me how to change my MIME type? I can see my .htaccess.html file and I tried adding in

               

              AddType video/ogg .ogv
              AddType video/mp4 .mp4
              AddType video/webm .webm

              But the server will not let me upload the new .htaccess file.  So I cannot change it.

              I'm using GoDaddy and have complete admin rights rights as far as I can tell.

              Again.  Any help is greatly appreciated.

              • 4. Re: I could use some help with my html5 and my video
                David_Powers Adobe Community Professional (Moderator)

                If your server won't let you upload the .htaccess file, you need to speak to your hosting company to ask if you have the necessary permissions to change it. If you don't ask them to change it for you.