前言

写在最前面：由于公司突然要搞个移动端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>

但由于我们是react项目，所以直接安装依赖包就好了。

yarn add flv.js
yarn add dplayer

2.实际使用

代码如下：

import React, {useEffect} from 'react';
import FlvJs from 'flv.js';
import DPlayer from 'dplayer';

const VideoPlayer = () => {

    useEffect( () => {
      const url = 'http://stream-0.vmr-prd.ty.supremind.info/live/01000000CDEE8E2CF9D070160100000000000000.flv';
        const dp = new DPlayer({
          container: document.getElementById('video'),
          video: {
            url,
            type: 'customFlv',
            customType: {
                customFlv (video) {
                    const flvPlayer = FlvJs.createPlayer({
                        type: 'flv',
                        url: video.src,
                    });
                    flvPlayer.attachMediaElement(video);
                    flvPlayer.load();
                },
            },
          },
        });
        dp.play();
    }, []);
  
    return (<div id="video" />);
  }
  export default VideoPlayer;