react 中使用 video.js 播放 hls(m3u8)格式的视频
简介：公司业务需求，由于后端把 mp4 视频转码成 m3u8 视频供手机端播放，导致后台系统播放不了 m3u8 格式的视频(原来是直接用的原生 video 标签播放)。
项目主要依赖：（先安装，步骤略）
create-react-app：3.0.0
{
"react": "^16.11.0",
"react-router-dom": "^5.1.2",
"antd": "^3.19.2",
"axios": "^0.19.0",
"mux.js": "^5.5.1",
"prop-types": "^15.7.2",
"video.js": "^7.6.6",
"videojs-contrib-hls": "^5.15.0",
"webpack": "^4.41.2"
}
1.组件
文件目录
src/components/VideoPlayer/index.jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
import Videojs from "video.js";
// 添加hls插件，以保证播放m3u8格式的视频
import "videojs-contrib-hls";
// 导入videojs 的样式
import "video.js/dist/video-js.css";
// 自定义样式（见下文）
import "./style.css";
// 给window上添加videojs, zh-CN.js 语言注册依赖 videojs.addLanguage()方法
// 配置了不生效的话 把public/index.html 里的标签 <html > </html> lang设置为 "zh-CN"
window.videojs = Videojs;
import("video.js/dist/lang/zh-CN.js");
class VideoPlayer extends Component {
static propTypes = {
// 视频地址
src: PropTypes.string,
// 视频高度
height: PropTypes.string,
// 视频宽度
width: PropTypes.string
};
// 默认的props
static defaultProps = {
src: "",
height: 360,
width: 640
};
state = {
videoId: "custom-video" + +new Date()
};
// 初始化内容
UNSAFE_componentWillReceiveProps(props) {
try {
const { src } = props;
if (!src || src === this.props.src) return;
this.initVideo(src);
} catch (error) {
console.log(error);
}
}
componentWillUnmount() {
// 销毁播放器
if (this.player) {
this.player.dispose();
}
}
// 初始化
initVideo(src) {
const { videoId } = this.state;
const { height, width } = this.props;
this.player = Videojs(videoId, {
height,
width,
controls: true,
preload: "auto",
fluid: true
});
this.player.src({ src });
}
render() {
const { videoId } = this.state;
return (
<div
className="custom-video-warpper"
style={{
display: this.props.src ? "block" : "none"
}}
>
{/* video标签的className一定要是 "video-js",否则样式不生效 */}
<video id={videoId} className="video-js" />
</div>
);
}
}
export default VideoPlayer;
src/components/VideoPlayer/style.css
.custom-video-warpper {
margin-bottom: 10px;
}
.custom-video-warpper .video-js {
border: 1px solid #ccc;
position: relative;
}
.custom-video-warpper .custom-video-dimensions.vjs-fluid {
padding-top: 0;
}
.custom-video-warpper .video-js .vjs-big-play-button {
border-radius: 2em;
width: 2em;
height: 2em;
line-height: 2em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.使用
import React, { Component } from "react";
import VideoPlayer from '@/components/VideoPlayer'
class AppForm extends Component {
state = {
videoUrl: ""
};
componentDidMount() {
this.getVideoUrl();
}
// 获取VideoUrl
getVideoUrl = async () => {
let videoUrl =
"https://cn7.kankia.com/hls/20191215/f0bdccd9d46df8600c445e8c6b0c3169/1576378697/index.m3u8";
this.setState({ videoUrl });
};
render() {
const { videoUrl } = this.state;
return <VideoPlayer src={videoUrl} />;
}
}
export default AppForm;
3.实现效果
参考链接
1.https://docs.videojs.com/
2.https://docs.videojs.com/tutorial-react.html