react+video.jsh5自定义视频暂停图标

目录

参考网址

效果图，暂停时显示暂停图标，播放时隐藏暂停图标

代码说明，代码传入url后，可直接复制使用

VideoPausedIcon.ts 组件

VideoCom.tsx

Video.module.less

---

参考网址

 在Video.js播放器中定制自己的组件 - acgtofe

效果图，暂停时显示暂停图标，播放时隐藏暂停图标

代码说明，代码传入url后，可直接复制使用

注意：videojs升级后，不能用extend创建组件，需要按下方代码建一个组件

VideoPausedIcon.ts 组件 import videojs from "video.js"; const Component: any = videojs.getComponent("Component"); export class VideoPausedIcon extends Component { constructor(player: any, options: any) { super(player, options); // 监听，暂停播放，显示播放按钮 player.on("pause", () => { this.visible = true; const el = this.el(); el.className = "vjs-define-paused"; }); // 监听，开始播放，隐藏播放按钮，通过videojs自带的 vjs-hidden 类 player.on("play", () => { this.visible = false; const el = this.el(); el.className = "vjs-define-paused vjs-hidden"; }); this.on("touchstart", this.handleTouchStart); this.on("touchend", this.handleTouchEnd); // 如果需要在web端使用，必须，不兼容的话，web端点击按钮就不会暂停/播放 this.on("click", (e: any) => this.handleClick(e, player)); } createEl() { let pauseIcon = videojs.dom.createEl("div", { className: "vjs-define-paused", tabIndex: -1, }); !this.visible && videojs.dom.appendContent(pauseIcon, ""); return pauseIcon; } handleTouchStart(e: any) { // 此处必须，不然点击按钮不能播放/暂停 e.stopPropagation(); } handleTouchEnd(e: any) { // 此处必须，不然点击按钮不能播放/暂停 e.stopPropagation(); } handleClick(e: any, player: any) { e.stopPropagation(); if (!player) { return; } const paused = player.paused(); if (paused) { player.play(); } else { player.pause(); } } } VideoCom.tsx import React, { useEffect } from "react"; import videojs from "video.js"; import "video.js/dist/video-js.css"; import styles from "./Video.module.less"; import { VideoPausedIcon } from "./VideoPausedIcon"; interface IProps { url: string; } const VideoCom: React.FC<IProps> = (props: any) => { const videoRef = React.useRef<any>(null); const playerRef = React.useRef<any>(null); useEffect(() => { const player: any = playerRef && playerRef.current; return () => { if (player && !player.isDisposed()) { player.dispose(); playerRef.current = null; } }; }, [playerRef]); useEffect(() => { if (!props.url) { return; } let options: any = { controlBar: { fullscreenToggle: true, pictureInPictureToggle: false, volumePanel: false, playToggle: false, }, muted: false, controls: true, //进度条 autoplay: false, //自动播放 loop: false, //是否循环 languages: { "zh-CN": new URL(`video.js/dist/lang/zh-CN.json`, import.meta.url).href, }, language: "zh-CN", preload: "auto", nodownload: true, sources: [{ src: props.url, type: "video/mp4" }], }; // Make sure Video.js player is only initialized once if (!playerRef || !playerRef.current) { // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode. const videoElement = document.createElement("video-js"); videoRef && videoRef.current && videoRef.current.appendChild(videoElement); playerRef.current = videojs(videoElement, options, () => { console.log("player is ready"); const player: any = playerRef.current; player.on("error", (err: any) => { console.log("source load fail"); // message.error("视频源请求出错"); }); let touchStartTime = 0; let touchEndTime = 0; player.on("touchstart", (e: any) => { touchStartTime = new Date().getTime(); }); player.on("touchend", (e: any) => { touchEndTime = new Date().getTime(); if (touchEndTime - touchStartTime < 300) { const paused = player.paused(); if (paused) { player.play(); } else { player.pause(); } } }); }); createPausedIcon(); } else { const player: any = playerRef.current; player.src(options.sources); } }, [ props.url, playerRef, videoRef ]); const createPausedIcon = () => { const player = playerRef && playerRef.current; if (!player) { return; } const Component: any = videojs.getComponent("Component"); Component.registerComponent("VideoPausedIcon", VideoPausedIcon); const options = {}; const properIndex = player .children() .indexOf(player.getChild("BigPlayButton")); player.addChild("VideoPausedIcon", options, properIndex); }; return ( <div className={styles.container}> <div className={styles.videoBox} ref={videoRef}></div> </div> ); }; export default VideoCom; Video.module.less .container { width: 100%; height: 100%; .videoBox { width: 100%; height: 100%; :global { .video-js { width: 100%; height: 100%; .vjs-big-play-button { display: none; } .vjs-define-paused { width: 30px; height: 28px; background: rgba(43, 63, 46, 0.7); border: 1px solid rgb(0, 255, 140); border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .4s; &::after { display: block; content: ''; position: absolute; top: 50%; left: calc(50% + 5px); transform: translate(-50%, -50%); border-top: 5px solid; border-bottom: 5px solid; border-left: 8px solid; border-right: 8px solid; border-color: transparent; border-left-color: rgb(0, 255, 140); } } } } } }