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