React中Video播放器的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着互联网的不断发展，视频的格式也越来越多，视频格式兼容问题也随之出现，这篇文章主要对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播放器的使用。