Solved

HTML5 quick loading video

Posted on 2010-11-25
3
272 Views
Last Modified: 2012-08-13
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
Comment
Question by:BrighteyesDesign
3 Comments
 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
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
 
LVL 6

Accepted Solution

by:
kmead6 earned 500 total points
Comment Utility
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
 

Author Comment

by:BrighteyesDesign
Comment Utility
Thanks for the detailed response!

Even I cannot go wrong with that information  : )

Thanks again
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now