基於瀏覽器的m3u8和flv的播放器

最近手頭的一個項目，基於瀏覽器的要做一個視頻播放器，h5的新標籤只支持mp4和ogg，還有webm三種格式，我這邊的需求是flv和m3u8，flv還好說，很多sfw媒體都支持，m3u8流媒體就不成了，也是折騰了半天哈，從老外那邊找到的解決辦法！廢話不多說，上代碼！

demo下載地址：http://download.csdn.net/detail/lemon_zhao/9674339

老外原網站：http://stackoverflow.com/questions/14731315/strobe-media-playback-osmf-events

請注意，代碼必須要在http服務器上運行，直接運行的話會報找不到流的錯誤！

<div>
    <span id="currentTime"></span>
    <span>^^^^^^^</span>
    <span id="duration"></span>
</div>
<div class="container">
    <div id="player-container">
    </div>
</div>
<button id="play-pause">pause or play</button>
<button onclick="playClear()">clear</button>

<script>

function onCurrentTimeChange(time, playerId){
    document.getElementById("currentTime").innerHTML = time;        
}

function onBufferingChange(time, playerId){
    document.getElementById("duration").innerHTML = time;   
}    

function completeFunc(time, playerId) {
    //var player = document.getElementById(playerId);
    console.log('完成！！')
}

function onJavaScriptBridgeCreated(){  
    var player = document.getElementById('player-container');  
    // Add event listeners that will update the 
    player.addEventListener("currentTimeChange", "onCurrentTimeChange");
    player.addEventListener("bufferingChange", "onBufferingChange");
    player.addEventListener("complete", "completeFunc");

    document.getElementById("play-pause").onclick = function(){
        var state = player.getState();
        if (state == "ready" || state == "paused") {
            player.play2();
        }
        else if (state == "playing") {
                player.pause();
        }
        return false;
    };
}

function playClear(){
    console.log('iiiii')
    play("")
}

function play(url){
    var flashvars = {
        //視頻源
        src: escape(url),
        //控制條自動隱藏
        controlBarAutoHide: true,
        //控制條位置
        controlBarPosition: "bottom",
        //流類型
        streamType : "vod",
        //自動播放
        autoPlay: true,
        verbose : true,
        bufferingOverlay: true,
        //m3u8轉換插件
        plugin_m3u8: "HLSProviderOSMF.swf",
        javascriptCallbackFunction: "onJavaScriptBridgeCreated"
    };

    var params = {
        quality : "high",
        allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };

    var attrs = {
        id:"player-container",
        name: "player-container",  
        align: "middle" 
    };



    swfobject.embedSWF(
        // url to SMP player
        "StrobeMediaPlayback.swf",
        // div id where player will be place
        "player-container",
        // width, height
        "600", "350",
        // minimum flash player version required
        "10.2",
        // other parameters
        null, flashvars, params, attrs
    );

}

play("http://vod-xycdn.zaizhibo.tv/broadcast/11-655611101188-1478138903226-41313281/index.m3u8")