关键词搜索

源码搜索 ×
×

html5播放flv

发布2021-01-08浏览3698次

详情内容

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

至于部分不支持的flv,我实在找不到什么办法,只能是转换成其他格式。转换的话,不用下载什么转换器(要么收费,要么像病毒一样,给你装一大堆垃圾),用ffmpeg就好。

将 001.flv 转成 001.mp4。

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

ffmpeg真好用,还可以看视频文件的编码等信息:

ffmpeg -i f:\temp\temp\002.flv
  • 1

在这里插入图片描述
在这里插入图片描述

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载