提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录 前言一、video.js是什么？二、使用步骤1.引入库2.创建Video播放器1.定义播放器容器2.创建播放器 总结前言
随着互联网的不断发展，视频的格式也越来越多，视频格式兼容问题也随之出现，这篇文章主要对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播放器的使用。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #React #video #Video播放器的使用
