yarn add @types/video.js
import videojs from "video.js";
import "video.js/dist/video-js.css";
export const VideoJS = ( props:any ) => {
const videoRef = React.useRef(null);
const playerRef = React.useRef<any>(null);
const { options, onReady } = props;
React.useEffect(() => {
// make sure Video.js player is only initialized once
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
const player = playerRef.current = videojs(videoElement, options, () => {
console.log("player is ready");
onReady && onReady(player);
});
} else {
// you can update player here [update player through props]
const player = playerRef.current;
console.log('playerplayerplayer===',player);
player.src(options.sources[0].src);
player.autoplay(true);
}
}, [options, videoRef]);
return (
<div data-vjs-player>
<video style={{
width:500,
height:600
}} ref={videoRef} className="video-js vjs-big-play-centered" />
</div>
);
}
使用
<CenterView>
{
videoInfo.url && <VideoJS options={{
controls: true,
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: true, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
src: videoInfo.url,
type: 'video/mp4'
}
],
poster: videoInfo.img, // 你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
fullscreenToggle: true // 全屏按钮
}
}} onReady={(play:any)=>{
console.log('play====',play);
videoRef.current = play
play.play()
}}/>
}
</CenterView>
或者使用H5自带video
<video
style={{position:'absolute',left:0,top:0}}
width='100%'
// height={'100%'}
loop
muted
autoPlay
playsInline
x5-playsinline
webkit-playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen
poster={'xxxxx.png'}
>
<source src={xxxxxxxx.mp4'} type="video/mp4"></source>
</video>
