天天看點

html5播放flv

html5的video标記,可以播放多種視訊,什麼mp4啦,mov啦,但不包括flv。flv與flash有關系,沒前途,快完蛋了。但好像這個又跟直播啥的有關聯(是一種直播協定),而且之前有一些視訊檔案是flv格式的,難道就傲嬌的索性不支援了嗎?

那麼html5中,如何播放flv檔案?不要想着用flash來播放,霸主chrome已經不支援了。

先說結論,可以播放,用​​bilili的開源項目flvjs​​就可以播放,不需要任何插件;但隻能部分播放,不是所有的flv檔案都能播放,隻有H.264編碼的才能播,什麼vp6f格式不行。原來,flv視訊檔案,本身也有多種格式啊。

vp6是很老舊的編碼了,H.264新一些。有關視訊編碼的知識,可以看這裡:

​​​視訊編碼簡史:H.263/H.264/H.265和MPEG2/MPEG4以及VP9,H264優點​​

具體的H5播放代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="flv.min.js"></script>
<style>body,center{
padding:0;
margin:0;
}
    .v-container{
        width:640px;
        height:360px;
    border:solid 1px red;
    }
  video{
    width:100%;
    height:100%;
  }</style>
</head>
<body>
  <div class="v-container">
    <video id="player1" muted autoplay="autoplay" preload="auto" controls="controls">
    </video>
  </div>
</body>
</html>
<script>if (flvjs.isSupported()) {
        var videoElement = document.getElementById('player1');
    var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://fed.dev.hzmantu.com/oa-project/bce0c613e364122715270faef1874251.flv'
        });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    //flvPlayer.play();
    }</script>      

至于部分不支援的flv,我實在找不到什麼辦法,隻能是轉換成其他格式。轉換的話,不用下載下傳什麼轉換器(要麼收費,要麼像病毒一樣,給你裝一大堆垃圾),用ffmpeg就好。

将 001.flv 轉成 001.mp4。

ffmpeg -i f:\temp\temp\001.flv f:\temp\temp\001.mp4      

ffmpeg真好用,還可以看視訊檔案的編碼等資訊:

ffmpeg -i f:\temp\temp\002.flv      
html5播放flv

繼續閱讀