react中使用video.js的踩坑记录
作者:Joey_iSleepy
这篇文章主要介绍了react中使用video.js的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
pnpm add video.js
1、设置中文包
初始化的时候引入video.js/dist/lang/zh-CN.json
videojs.addLanguage(‘zh-CN', zhCN)
即可~
2、样式错乱,不在规定的元素内
在video标签中添加
className='video-js'
3、报错The element or ID supplied is not valid.
video标签需要添加id,
在react中,在初始化的时候使用videoRef.current
可以生效,但是在后续点击按钮,切换视频源的时候报错了
我这边是给组件传进来了一个id值,这样每次组件使用可以根据传入的id值来进行绑定。
4、切换视频源有时候报错
he play() request was interrupted by a new load request
每次在palyer.play()的前,先暂停正在播放的视频palyer.pause()
但是这个问题有时候还是存在,但是不影响,具体原因还未排查到。
5、初始化报错
The media could not be loaded, either because the server or network failed or because the format is not supported.
原来我是在videoJsOptions 中设置了 sources,但是由于初始化的时候playSrc,为空,所以报错了。
[ { // 视频文件的路径,可以是一个前端相对路径、后台视频文件URL、直播源等 src: playSrc // 视频源类型 // type: 'application/x-mpegURL' } ]
6、在source中可以添加上
src={playSrc || window.location.href}
否则,初始化会由于src为空报错
7、参考官方demo
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;
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。