HTML5 audio and video

<video width=”640″ height=”480″ controls autoplay preload=”auto” loop poster=”myVideoPoster.jpg”>

<source src=”video/myVideo.mp4″ type=”video/mp4″>

<source src=”video/myVideo.ogv” type=”video/ogg”>
<object width=”640″ height=”480″ type=”application/x-shockwave-flash” data=”myFlashVideo.SWF”>
<param name=”movie” value=”myFlashVideo.swf” />
<param name=”flashvars” value=”controlbar=over&amp;image=myVideoPoster.jpg&amp;file=video/myVideo.mp4″ />
<img src=”myVideoPoster.jpg” width=”640″ height=”480″ alt=”__TITLE__”
title=”No video playback capabilities, please download the video below” />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href=”http://myVideo.mp4″>”MP4″</a>
Ogg Format: <a href=”http://myVideo.ogv”>”Ogg”</a>
</p>
</video>

controls: will show the controls for the video

preload: pretty much the same as buffer

loop: automatically loops when the video ends

poster: the initial video image placeholder

<source> tags: if a format is not available in the current browser, it will play the next one up

All other HTML content, including the <object> flash tag are there just in case the current browser don’t support HTML5.

Audio pretty much the same, except it doesn’t have height, width and poster attributes:

<audio controls =  "controls">
    <source src =  "music.ogg" type =  "audio/ogg" />
    <source src =  "music.mp3" type =  "audio/mpeg" />
      Your browser does not support HTML5 Audio. Please shift to a newer browser.
</audio>

You can also add audio tags dynamically, via JavaScript:
<script>
    //Create a new Audio object
    var sound = new Audio();
    // Select the source of the sound
    sound.src = "music.ogg";
    // Play the sound
    sound.play();
</script>

To test if certain audio format can be played in the current browser:
if (audio.canPlayType) {
           // Currently canPlayType() returns: "", "maybe", or "probably"


To check if an audio file has finished loading:
<script>
    if(soundFileExtn) {
        var sound = new Audio();
        sound .addEventListener('canplaythrough', function(){
            alert('loaded');
            sound.play();
        });
        // Load sound file with the detected extension
        sound.src = "bounce" + soundFileExtn;
    }
</script>

Videos and Google

The origin of the information: http://www.reelseo.com/video-xml-sitemaps-video/

The best way to get it to google videos is by creating a video sitemap.

Once you make a sitemap and specify a URL where your video is supposed to be, Google will go to your page and verify that the video is really there.

Without these elements, the videos won’t be processed by Google crawler:

Title: <video:title> This must match the title of your page

Description: <video:description> This must match the description of the page

Thumbnail: <video:thumbnail> Thumbnail size recommended: 160×120 pixels.

Player: <video:player_loc>the url that will load and play your video (for the flash video for example)

Content location: <video:content_loc> the actual location of the video. The robots in this content directory should allow User Agent to be “Googlebot”

Every item on your feed should be unique: multiple items to a single URL should not be included. If there are missing mandatory tags, don’t put the item on your feed, because it won’t be taken

Highly recommended:

Duration

Expiration: format is (YYYY-MM-DD) or (YYYY-MM-DDThh:mm:ss+TZD)

Regional restrict

Notes:

Regarding the RSS and the content location, your feeds have to sit in the same domain and host as the loc urls only (this is not required for the player or the content).

In webmaster tools the sitemap has been indexed, but not showing in Universal search, or google video. The number of videos marked as indexed are the ones that will show on the web index, not in the video sitemap index.

Yahoo: submit mrss sitemap video.

Example on how to set a videositemap reference on robots.txt:

Sitemap: http://www.reelseo.com/sitemap-index.xml

Sharing (or liking button) on facebook seems to help

with the indexing of the videos.