React项目中使用Dplayer播放FLV格式视频教程（不支持ios）

本文链接：https://blog.csdn.net/qq_22836769/article/details/119251119

本文档介绍了如何在React项目中利用Dplayer和flv.js播放FLV格式的视频，详细阐述了引入库和实际使用步骤，特别指出由于iOS不支持FLV，故需后端转流为HLS格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、Dplayer
二、使用步骤
- 1.引入库
- 2.实际使用

前言

写在最前面：由于公司突然要搞个移动端h5，可以在手机上查看监控视频，但我们公司的视频直播流都是flv格式的，所以我找了个插件：Dplayer来实现。注意：！！！！ios不支持flv格式的直播流。Dplayer、VideoJS这些就不说了，基于MSE解码的视频播放器在ios上都无法使用，说自己能支持的 EasyPlayer.js、WXInlinePlayer 我也试过了，无法支持。

所以最终还是让后端转流了，转成HLS格式。

提示：记录一下Dplayer播放flv格式的视频的步骤。

一、Dplayer

Dplayer官网指南

二、使用步骤

1.引入库

不管使用什么样的播放器，要支持FLV格式的视频流，就必须要引入flv.js。

flv.js是由bilibili开发的HTML5 Flash 视频 (FLV) 播放器。
flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（分段 MP4）片段，然后通过媒体源扩展API将 mp4 片段提供给 HTML5元素。

可以使用<Script>标签在html文件的header中使用cdn引入。
如下：

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.0/flv.js"></script