目錄

參考網(wǎng)址

效果圖，暫停時(shí)顯示暫停圖標(biāo)，播放時(shí)隱藏暫停圖標(biāo)

代碼說明，代碼傳入url后，可直接復(fù)制使用

VideoPausedIcon.ts 組件

VideoCom.tsx

Video.module.less

參考網(wǎng)址

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

效果圖，暫停時(shí)顯示暫停圖標(biāo)，播放時(shí)隱藏暫停圖標(biāo)

代碼說明，代碼傳入url后，可直接復(fù)制使用

注意：videojs升級(jí)后，不能用extend創(chuàng)建組件，需要按下方代碼建一個(gè)組件文章來源地址http://www.zghlxwxcb.cn/news/detail-788118.html

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);
    // 監(jiān)聽，暫停播放，顯示播放按鈕
    player.on("pause", () => {
      this.visible = true;
      const el = this.el();
      el.className = "vjs-define-paused";
    });
    // 監(jiān)聽，開始播放，隱藏播放按鈕，通過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端點(diǎn)擊按鈕就不會(huì)暫停/播放
    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) {
    // 此處必須，不然點(diǎn)擊按鈕不能播放/暫停
    e.stopPropagation();
  }

  handleTouchEnd(e: any) {
    // 此處必須，不然點(diǎn)擊按鈕不能播放/暫停
    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, //進(jìn)度條
      autoplay: false, //自動(dòng)播放
      loop: false, //是否循環(huán)
      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("視頻源請(qǐng)求出錯(cuò)");
        });
        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);
          }
        }
      }
    }
  }

}

到了這里，關(guān)于react+video.js h5自定義視頻暫停圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！