Reply
The HTML 5 video tag, and how to use it now.
Old 07-20-2009, 12:17 PM The HTML 5 video tag, and how to use it now.
wayfarer07's Avatar
I like pie

Posts: 3,364
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
I just found this interesting little code snippet on the <video> tag demo page for the new Firefox 3.5:

HTML Code:
<video width="640" height="360" id="video" tabindex="0" controls="">
    <source type='video/ogg; codecs="theora, vorbis"' src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv"/>
    <source type="video/mp4" src="http://videos.mozilla.org/firefox/3.5/meet/meet.mp4"/>

    <object data="/includes/flash/playerWithControls.swf?flv=firefox/3.5/meet/meet.mp4&amp;autoplay=false&amp;msg=Play%20Video" style="width: 640px; height: 388px;" type="application/x-shockwave-flash">

        <param value="/includes/flash/playerWithControls.swf?flv=firefox/3.5/meet/meet.mp4&amp;autoplay=false&amp;msg=Play%20Video" name="movie"/>
        <param value="transparent" name="wmode"/>

        <div class="video-player-no-flash">
            This video requires a browser with support for open video:
            <ul>
                <li><a href="http://www.mozilla.com/firefox/">Firefox</a> 3.5 or greater</li>
                <li><a href="http://www.apple.com/safari/">Safari</a> 3.1 or greater</li>
            </ul>
            or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
            Alternatively, you may use the video download links to the right.
        </div>
    </object>
</video>
This works in the latest Firefox, as well as Safari. As you can see, inside of the VIDEO element is an OBJECT, which points at a Flash file as an alternative means of playing the video. This means that we can, as of this very moment, use the HTML 5 <video> tag (or the <audio> tag).
__________________
Wayfarer | jQuery Tooltip | Mapbox: the jQuery Map
Latest Project: Houston Movers
If Google is the Coca-Cola of Web search, Bing is RC Cola
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
 
When You Register, These Ads Go Away!
Old 07-20-2009, 12:46 PM Re: The HTML 5 video tag, and how to use it now.
Banned

Posts: 315
Name: Doug
Trades: 1
Now all you have to do is wait 5 years or more for Microsoft Internet Exploder to catch up to this code set.

Audio and Video should have been treated as objects a long time ago.

What I'd love to see is a cool tag that would allow easy implementation of sound effects and also voice-over. Hover and it speaks.

Many years ago I added some specific wav files to a customer's machine.
He was doing stupid things over and over.

After about a week of these comments every time he did something it
broke him of his habits.

How cool would it be to create a "see and say" site.

It would be phenominal for blind people.
marketingman100 is offline
Reply With Quote
View Public Profile
 
Old 07-20-2009, 03:46 PM Re: The HTML 5 video tag, and how to use it now.
wayfarer07's Avatar
I like pie

Posts: 3,364
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Quote:
Originally Posted by marketingman100 View Post
What I'd love to see is a cool tag that would allow easy implementation of sound effects and also voice-over. Hover and it speaks.
That could be done pretty easily with the AUDIO tag I would think, and a bit of JavaScript. Not sure how that would work, but it can't be too difficult.
__________________
Wayfarer | jQuery Tooltip | Mapbox: the jQuery Map
Latest Project: Houston Movers
If Google is the Coca-Cola of Web search, Bing is RC Cola
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 07-20-2009, 06:00 PM Re: The HTML 5 video tag, and how to use it now.
Banned

Posts: 315
Name: Doug
Trades: 1
Imagine:

Buttons when you hover them that say "Click me."
Links that could be recorded in any voice.
Telephone numbers that ring.
The possibilities are endless.

I saw a site many months ago where the voice-over was done in flash some way that the initial load of the site was not affected by the large audio file.

As soon as you hit the site, the dialog started.

Clicks triggered new pages and audio files.........
It was really nicely done.
marketingman100 is offline
Reply With Quote
View Public Profile
 
Old 07-20-2009, 06:57 PM Re: The HTML 5 video tag, and how to use it now.
wayfarer07's Avatar
I like pie

Posts: 3,364
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Like you said, it can already be done with the help of Flash, so it is probably actually easier with the aid of the <audio> element, since it is a regular HTML element. However, it is going to be trickier to make it degrade to Flash if the HTML5 element is not available.

What you're describing could be really annoying if it is done wrong, so hopefully it won't be abused once it becomes really easy to do.
__________________
Wayfarer | jQuery Tooltip | Mapbox: the jQuery Map
Latest Project: Houston Movers
If Google is the Coca-Cola of Web search, Bing is RC Cola
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 07-20-2009, 07:38 PM Re: The HTML 5 video tag, and how to use it now.
Banned

Posts: 315
Name: Doug
Trades: 1
Many years ago, I had a web site I ran called "The Cemetery Shop".

One of the things I did was full Celebrity Obituaries.
On each of those pages, I had a midi song playing in the background.
.05% of the 480,000 visiters a year found it annoying, everyone else complimented on how I seemed to match the right song to the person every time.

I just told those who found it annoying to turn off their speakers before visiting the site.
marketingman100 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to The HTML 5 video tag, and how to use it now.
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.10065 seconds with 13 queries