html5播放flv

太过爱你忘了你带给我的痛 2022-11-19 13:57 382阅读 0赞

html5的video标记，可以播放多种视频，什么mp4啦,mov啦，但不包括flv。flv与flash有关系，没前途，快完蛋了。但好像这个又跟直播啥的有关联（是一种直播协议），而且之前有一些视频文件是flv格式的，难道就傲娇的索性不支持了吗？

那么html5中，如何播放flv文件？不要想着用flash来播放，霸主chrome已经不支持了。

先说结论，可以播放，用[bilili的开源项目flvjs][bilili_flvjs]就可以播放，不需要任何插件；但只能部分播放，不是所有的flv文件都能播放，只有H.264编码的才能播，什么vp6f格式不行。原来，flv视频文件，本身也有多种格式啊。

vp6是很老旧的编码了，H.264新一些。有关视频编码的知识，可以看这里：  
[视频编码简史:H.263/H.264/H.265和MPEG2/MPEG4以及VP9，H264优点][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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]

[bilili_flvjs]: https://github.com/Bilibili/flv.js
[H.263_H.264_H.265_MPEG2_MPEG4_VP9_H264]: https://www.zhoulujun.cn/html/theory/multimedia/CG-CV-IP/6780.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/e6d5e76e156f41d999327e2cf6cae025.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/356a863d322a4d4d8bf207f613e45036.png