01 使用
<Player id="mycamera" url="xxx.flv"/>
02 封装
- 第三方库:flv.js
- 播放组件
import React, { useRef, useEffect } from 'react';
// 传入id和链接
const Player = ({ id, url }) => {
let { current: player } = useRef(null); // 实例
// 创建播放器
const handleCreatePlayer = () => {
// 创建DOM
let videoElement = document.getElementById(id);
if (_.isNull(videoElement)) {
return;
}
// 设置音量
videoElement.volume = 10;
// 创建实例
player = flvjs.createPlayer({
type: 'flv',
url: url // flv的链接
});
player.attachMediaElement(videoElement);
player.load();
// 播放
let playPromise = player.play();
if (playPromise !== undefined) {
playPromise
.then(() => {
player.play();
})
.catch(() => {});
}
};
// 摧毁播放器
const handleDestroyPlayer = () => {
if (player) {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
};
// 如果url变换 把之前的播放器摧毁,再创建新的
useEffect(() => {
handleDestroyPlayer();
handleCreatePlayer();
}, [url]);
// 组件销毁时摧毁播放器
useEffect(() => {
return () => {
handleDestroyPlayer();
};
}, []);
return (
{/* 隐藏video默认控件 */}
<div>
<video id={id} muted autoplay controls="controls" controlslist="nodownload noplaybackrate" disablePictureInPicture/>
</div>
);
};
export default Player;
- CSS隐藏video默认控件
//全屏按钮
video::-webkit-media-controls-fullscreen-button {
display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
display: none;
}
//进度条
video::-webkit-media-controls-timeline {
display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {
display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
display: none;
}