赞
踩
pnpm add video.js
初始化的时候引入video.js/dist/lang/zh-CN.json
, videojs.addLanguage(‘zh-CN’, zhCN) 即可
在video标签中添加 className='video-js'
video标签需要添加id,在react中,在初始化的时候使用videoRef.current
可以生效,但是在后续点击按钮,切换视频源的时候报错了,我这边是给组件传进来了一个id值,这样每次组件使用可以根据传入的id值来进行绑定。
每次在palyer.play()的前,先暂停正在播放的视频palyer.pause()
,但是这个问题有时候还是存在,但是不影响,具体原因还未排查到。
[
{
// 视频文件的路径,可以是一个前端相对路径、后台视频文件URL、直播源等
src: playSrc
// 视频源类型
// type: 'application/x-mpegURL'
}
]
video.js官方demo,将video.js封装为组件,使用
提示:这里描述项目中遇到的问题:
例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据
APP 中接收数据代码:
import React, { useState, useRef, useEffect } from 'react' import videojs from 'video.js' import AsideItem from '@/components/AsideItem' import EquipmentSelect from '../Components/EquipmentSelect' import 'video.js/dist/video-js.css' import zhCN from 'video.js/dist/lang/zh-CN.json' import styles from './index.module.scss' export default function index({ id = 'my-video' }) { const videoRef = useRef(null) const playerRef = useRef(null) const [playSrc, setPlaySrc] = useState('') const [option, setOptopm] = useState({}) const vedioSelect = (r) => { if (r['url']) { setPlaySrc(r['url']) const myPlayer = videojs(id) myPlayer.pause() myPlayer.src([{ type: 'application/x-mpegURL', src: r['url'] }]) const playPromise = myPlayer.play(r['url']) if (playPromise !== undefined) { playPromise .then(() => { myPlayer.play(url) }) .catch((e) => { // 音频加载失败 }) } } } useEffect(() => { videojs.addLanguage('zh-CN', zhCN) const videoElement = document.getElementById(id) const videoJsOptions = { language: 'zh-CN', // 设置语言为中文 muted: true, poster: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF', //视频封面 notSupportedMessage: '此视频暂无法播放,请稍后再试' } const player = videojs(videoElement, videoJsOptions, () => {}) // 销毁组件时,销毁播放器实例 return () => { if (player) { player.dispose() playerRef.current = null } } }, []) return ( <AsideItem title='视频监控'> <div className={styles.monitor} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} > <EquipmentSelect onChange={vedioSelect} /> <div style={{ flex: '1' }}> <video data-setup='{}' style={{ width: '100%', height: '100%' }} ref={videoRef} id={id} controls preload='auto' autoPlay muted className='video-js' > <source id='source' src={playSrc || window.location.href} type='application/x-mpegURL' /> </video> </div> </div> </AsideItem> ) }
封装demo
import React, { useEffect, useState, useRef } from "react"; import styles from "./index.scss"; import videojs from "video.js"; import "video.js/dist/video-js.css"; import zhCN from "video.js/dist/lang/zh-CN.json"; const PlayBox = ({ videoList = [], type = "iframe", videoStyle,getCurrent }) => { const videoRef = useRef(null); const [playSrc, setPlaySrc] = useState(""); const [currentIndex, setCurrentIndex] = useState(0); const [loading, setLoading] = useState(true); useEffect(() => { videojs.addLanguage("zh-CN", zhCN); const player = videojs(videoRef.current, { language: "zh-CN", // 设置语言为中文 }); // 销毁组件时,销毁播放器实例 return () => { if (player) { player.dispose(); } }; }, []); useEffect(() => { if (Array.isArray(videoList) && videoList.length) { setPlaySrc(videoList[0]); setLoading(false); } }, [videoList]); useEffect(() => { setLoading(true); if (type === "video") { const monitorVideo = document.getElementById("monitor"); if (monitorVideo) { monitorVideo.setAttribute("autoplay", "true"); monitorVideo.muted = true; videojs(monitorVideo); } playSrc && playVideo(playSrc); } }, [playSrc, type]); const leftClick = () => { if (videoList.length <= 1) return; let index = currentIndex; if (currentIndex === 0) { index = videoList.length - 1; } else index = currentIndex - 1; setCurrentIndex(index); setPlaySrc(videoList[index]); getCurrent&&getCurrent(index) }; const rightClick = () => { if (videoList.length === 1) return; let index = currentIndex; if (currentIndex === videoList.length - 1) { index = 0; } else index = currentIndex + 1; setCurrentIndex(index); setPlaySrc(videoList[index]); getCurrent&&getCurrent(index) }; const playVideo = (url) => { const myPlayer = videojs("monitor"); myPlayer.pause(); myPlayer.src([{ type: "application/x-mpegURL", src: url }]); let playPromise = myPlayer.play(url); if (playPromise !== undefined) { playPromise .then(() => { myPlayer.play(url); }) .catch((e) => { // 音频加载失败 }); } const playButton = document?.querySelector(".vjs-play-control"); if (playButton) { myPlayer.on("play", () => { playButton.classList.remove("vjs-paused"); playButton.classList.add("vjs-playing"); }); myPlayer.on("pause", () => { playButton.classList.remove("vjs-playing"); playButton.classList.add("vjs-paused"); }); } setLoading(false); }; return ( <div className="playBox"> <div className="loading" style={{ display: loading || !playSrc ? "block" : "none" }} > 加载中... </div> {type === "iframe" && playSrc ? ( <div className="video_box"> <iframe src={playSrc} allowFullScreen={true} allowTransparency={true} allow="autoplay" style={{ width: "100%", height: "100%", border: 0 }} onLoad={() => { setLoading(false); }} /> </div> ) : null} {type === "video" ? ( <video ref={videoRef} id="monitor" className="video-js" controls preload="auto" autoPlay muted width={videoStyle?.width || 440} height={videoStyle?.height || 250} data-setup="{}" > <source id="source" src={playSrc || window.location.href} type="application/x-mpegURL" /> </video> ) : null} {Array.isArray(videoList) && videoList.length ? ( <> <div className="left" onClick={leftClick}></div> <div className="right" onClick={rightClick}></div> </> ) : null} </div> ); }; export default PlayBox;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。