html5实现视频播放

注意：

1.关于视频格式，不同浏览器支持的不一样，safari--mp4  chrome--webm firefox opera--ogv，ie8或更早的浏览器不支持

2.语句详解 

Sorry, your browser doesn't support the video element

3.如果希望增加flash插件，以处理浏览器不支持html5播放的情况，可以

4.video元素API的一些常用属性方法和事件

5.可以利用类似ended的事件，来添加播放列表

var video; video = document.getElementById("video");

video.addEventListener("ended", nextVideo, false); //增加监听事件,继续nextVideo函数

6.canPlayType 方法，可以让浏览器判断是否可以播放的文件类型

video.canPlayType("video/mp4");   //video目录下mp4格式，会返回两个值，空字符串表示不可能，maybe表示也许

video.canPlayType('video/mp4; codecs="theora, vorbis"');  //如果增加了编解码器的具体类型，则有可能会多出一个返回值， probably最后可能

6.使用加载和play在js里

    video.load();
    video.play();

完整代码：

var position = 0;
var playlist;
var video;
window.onload = function()
{
    playlist = ["video/preroll", "video/areyoupopular", "video/destinationearth"];  //增加播放列表
    video = document.getElementById("video");
    video.addEventListener("ended", nextVideo, false); //增加监听事件
    video.src = playlist[position] + getFormatExtension(); //添加文件名
    video.load();
    video.play();
};


function nextVideo ()  //下一个视频函数
{
    position++;
    if (position >= playlist.length)
    {
        position = 0;
    }
    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}


function getFormatExtension()  //格式判断函数
{
    if (video.canPlayType("video/mp4") != "")
    {
        return ".mp4";
    }
    else if (video.canPlayType("video/webm") != "")
    {
        return ".webm";
    }
    else if (video.canPlayType("video/ogg") != "")
    {
        return ".ogg";
    }
}
 /**
 * Created by andrewlee on 13-11-5.
 */