npm install video.js npm install @type/video.js
页面组件index.tsx
import React, { Component } from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css' import styles from './index.css'; //接口类型 interface IVideoOptions { height: number | undefined, width: number | undefined, autoplay: boolean; muted: boolean; controls: boolean, sources: [{ src: string; type: string; }]; playbackRates: number[]; controlBar: { // 竖直的音量控制 volumePanel: { inline: boolean }, } } interface IProps { options: IVideoOptions } interface IState { videoRef?: HTMLElement | HTMLVideoElement | HTMLDivElement | null; player?: any } export class Index extends Component<IProps, IState> { public state: IState = {}; // 属性默认值 public static defaultProps = { options: { height: 400, width: 600, autoplay: true, muted: true, controls: true, playbackRates: [0.5, 1, 1.5, 2], sources: [{ src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', type: 'video/mp4' }], controlBar: { // 竖直的音量控制 volumePanel: { inline: false }, } } }; public render() { return ( <div className={styles.video_index}>//本地更改按钮样式 <div data-vjs-player> <video className="video-js vjs-big-play-centered" //控制栏样式 必需 ref={component => this.state.videoRef = component} controls> </video> </div> </div> ) } componentDidMount() { const { options } = this.props; const player = videojs(this.state.videoRef, options); videojs(this.state.videoRef).ready(function () { //监听 player.on('play', function () { console.log('开始播放') }); player.on('pause', function () { console.log('播放暂停') }); player.on('timeupdate', function (e) { var currentTime = Math.floor(player.currentTime()); if (currentTime > 0 && (currentTime % 5 == 0)) { //每隔5秒，向服务器提交播放时间(秒) } console.log(currentTime) }); }); console.log(player) } } export default Index样式更改
/** 播放按钮 */ .video_index :global .video-js .vjs-big-play-button { line-height: 2.3em; height: 2.5em; width: 2.5em; border-radius: 50%; } .video_index :global .vjs-big-play-button .vjs-icon-placeholder { font-size: 1.63em; } .video_index :global .vjs-paused .vjs-big-play-button, .video_index :global .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; } /* 点击屏幕播放/暂停 */ .video_index :global .video-js.vjs-playing .vjs-tech { pointer-events: auto; } /** 播放时间 */ .video_index :global .video-js .vjs-time-control{display:block;} .video_index :global .video-js .vjs-remaining-time{display: none;}适用于JavaScript的视频播放组件 video-react.js api文档
播放 player键盘控制 Shortcut初始播放 BigPlayButton海报图片 PosterImage加载视频之前 LoadingSpinner控制栏 ControlBar播放切换 PlayToggle重播控制 控制栏中的一个按钮可前进5/10/30秒。ReplayControl正向控制 控制栏中的一个按钮可前进5/10/30秒。ForwardControl音量菜单按钮 VolumeMenuButton下拉菜单可控制播放速率 PlaybackRateMenuButton向Player中添加ClosedCaption按钮组件 ClosedCaptionButton