Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 282
  • Last Modified:

HTML5 quick loading video

Basically I need to show a video on a webpage. This video needs to start as soon as there's enough to play. Until now I have created these in Flash but many of my clients are now viewing their websites on iphone, ipad and itouch where of course Flash does not work.

This is why I need to have these videos working in a format other than Flash and ideally in HTML5 to take advantage of the new video tag.

Thanks in advance!
0
BrighteyesDesign
Asked:
BrighteyesDesign
1 Solution
 
BardobraveCommented:
Try this:

<video src="movie.ogg" controls="controls" autoplay="autoplay">
your browser does not support the video tag
</video>

More here:

http://www.w3schools.com/html5/tag_video.asp
0
 
kmead6Commented:
If you want to use HTML <video> tags, you'll have to cover all your bases. IE, FIrefox, Safari and Chrome vary on what video file types they use.

To cover all your bases the code will have to look similar to what's attached. Inside your <video> tags you will need links to 4 different types of videos (and it's important that they are in this order): m4v, .webm, .ogv, .flv

-Apple mobile devices and safari use the MP4 codec. You can use a MP4 filetype but I believe iPhones need it to be M4V. Also, no matter what the filetype, iPhones won't play video files above 480 by 320 pixels. You can have one size file for the iphone and one size for everything else if you want to use CSS media queries.

-The webM codec is used by Chrome, Firefox, and Opera. This is kind of simliar to the next codec, OGV, but I find it more reliable so I use this one and put it above OGV so browsers that can play webM will.

-The Theora codex (OGV) is used by Firefox, Chrome, and Opera as well. You can just use this codec and nix the webM, but if you want to be thorough....

-Then finally link to the flash video (FLV). If all else fails, this will play. But hopefully not. =)
I generate my FLV code inside of Dreamweaver, which is why it is so long below. I think you can do it shorter, but I always just use the easy Dreamweaver option and let them deal with it.

All you need to do to the code attached is change all the LINKS to be links to your content. You don't have to include a poster image, but it's kind of nice.

To create M4V files, I just use Quicktime or Compressor. To create webM files and OGV files I use Firefogg (www.firefogg.org) but this app can only be used inside of Firefox. You can easily set your dimensions, file type, etc. and encode directly in your browser. And well, you know how to create FLV files.

(what a long post) If you want to read more about <video> tags and HTML5, this is quite an all-encompassing link: http://diveintohtml5.org/video.html
<video controls preload poster="LINK to an image that will display while video is loading"> 
    	<source src="LINK TO M4V VIDEO" type='video/mp4; codecs="avcl.4 2E01E, mp4a.40.2"' /> 
        <source src="LINK TO WEBM VIDEO" type='video/webm; codecs="vp8, vorbis"'> 
        <source src="LINK TO OGV VIDEO" type='video/ogg; codecs="theora, vorbis"' /> 
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="" height="" id="FLVPlayer"> 
          <param name="movie" value="FLVPlayer_Progressive.swf" /> 
          <param name="quality" value="high" /> 
          <param name="wmode" value="opaque" /> 
          <param name="scale" value="noscale" /> 
          <param name="salign" value="lt" /> 
          <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=LINK TO FLV&amp;autoPlay=false&amp;autoRewind=false" /> 
          <param name="swfversion" value="8,0,0,0" /> 
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> 
          <param name="expressinstall" value="../Scripts/expressInstall.swf" /> 
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> 
          <!--[if !IE]>--> 
          <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="" height=""> 
            <!--<![endif]--> 
            <param name="quality" value="high" /> 
            <param name="wmode" value="opaque" /> 
            <param name="scale" value="noscale" /> 
            <param name="salign" value="lt" /> 
            <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=LINK TO FLV&amp;autoPlay=false&amp;autoRewind=false" /> 
            <param name="swfversion" value="8,0,0,0" /> 
            <param name="expressinstall" value="../Scripts/expressInstall.swf" /> 
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> 
            <div> 
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> 
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> 
            </div> 
            <!--[if !IE]>--> 
          </object> 
          <!--<![endif]--> 
        </object> 
    </video>

Open in new window

0
 
BrighteyesDesignAuthor Commented:
Thanks for the detailed response!

Even I cannot go wrong with that information  : )

Thanks again
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now