react实现网页播放m3u8

m3u8是直播常见的格式，如何在网页上播放它呢？
一、如果是safari，则非常简单，因为safari本身就可以支持这种格式，直接用video标签即可，唯一注意的是type一定要指定成application/x-mpegURL

<video height="100%" width="100%" controls>
      <source src={m3u8Url} type="application/x-mpegURL" />
</video>

二、如果用chrome，则需要用到video.js包，具体的解决步骤如下：
1、安装video.js相关的包
npm install --save video.js
网上说还要安装videojs-contrib-hls，但似乎没有装它也是可以正常播放的，这个库具体的作用，待研究
2、写一个videoPlayer.js

import React, { Component } from "react";
import Videojs from "video.js";
//import "videojs-contrib-hls";
import "video.js/dist/video-js.css";

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillUnmount() {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }
  componentDidMount() {
    const { height, width, src } = this.props;
    this.player = Videojs(
      "custom-video",
      {
        height,
        width,
        bigPlayButton: true,
        textTrackDisplay: false,
        errorDisplay: false,
        controlBar: true,
        type: "application/x-mpegURL",
      },
      function () {
        this.play();
      }
    );
    this.player.src({ src });
  }

  render() {
    return (
      <video
        id="custom-video"
        className="video-js"
        controls
        preload="auto"
      ></video>
    );
  }
}

export default VideoPlayer;

注意：
1）this.player中的id与video标签中的id一定要一致，react就是用这个id进行绑定的；
2）this.player.src({ src });这行一定要放在player的定义的后面，直接放到Vediojs的初始化的src字段中是没用的。
3）className=“video-js” 这个className一定要用video-js，否则视频播放控件就没有样式了

3、在调用页直接引用VedioPlayer

<VideoPlayer src={m3u8url} width="250" />

这里的m3u8url如果是从服务端获取的，则一定要保证先获取成功了再加载VideoPlayer，否则m3u8url为空，页面依然是播放不了