Solved

HTML5 quick loading video

Posted on 2010-11-25
3
273 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
ID: 34213410
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
ID: 34219298
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
ID: 34219356
Thanks for the detailed response!

Even I cannot go wrong with that information  : )

Thanks again
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
input text box not behaving properly when debug points are set 4 54
HTML code not showing slider block in Magento 2 29
html input type 3 21
Wrapper for APPs 9 35
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

910 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

22 Experts available now in Live!

Get 1:1 Help Now