提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
随着互联网的不断发展,视频的格式也越来越多,视频格式兼容问题也随之出现,这篇文章主要对video.js播放mp4和hls视频格式进行简单使用。
一、video.js是什么?
video.js是一个通用的在网页上嵌入视频播放器的 JS 库,是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频。支持在桌面和移动设备上播放视频。
二、使用步骤
1.引入库
使用yarn add video.js@5.18.4 @types/video.js -D安装video.js。
在项目中引入video.js
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
2.创建Video播放器
1.定义播放器容器
在render函数中定义播放器容器:
<div data-vjs-player>
<video ref={videoRef} className='video-js vjs-big-play-centered' />
</div>
2.创建播放器
定义video播放器的配置项
const videoJsOptions = {
autoplay: true,
controls: true,
responsive: true,
fluid: true,
sources: [{
src: '/path/to/video.mp4',
type: 'video/mp4'
}]
};
创建播放器:
componentDidMount() {
this.player = videojs(this.videoNode, this.props, () => {
player.log('onPlayerReady', this);
});
}
销毁播放器:
componentDidMount() {
this.player = videojs(this.videoNode, this.props, () => {
player.log('onPlayerReady', this);
});
}
总结
本文仅仅简单介绍了Video播放器的使用。