react实现网页播放m3u8

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

1
2
3

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

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
41
42
43
44
45
46
47
48
49

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、在调用页直接引用VedioPlayer

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

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