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

这篇具有很好参考价值的文章主要介绍了react+video.js h5自定义视频暂停图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

参考网址

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

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

VideoPausedIcon.ts 组件

VideoCom.tsx

Video.module.less


参考网址

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

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

react video自定义按钮,前端库--videojs,前端框架--react,前端框架

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

注意:videojs升级后,不能用extend创建组件,需要按下方代码建一个组件文章来源地址https://www.toymoban.com/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);
    // 监听,暂停播放,显示播放按钮
    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);
          }
        }
      }
    }
  }

}

到了这里,关于react+video.js h5自定义视频暂停图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Swiper.js使用(详细版)3D聚焦特效,自定义导航按钮等

    共用代码 普通版本 重点:  modules={[Navigation, Pagination]}   Swiper, SwiperSlide  没什么好说的 自定义导航按钮 / 进度条 + 解决同一页面,多个swiper.js 导航切换按钮冲突问题 这里的重点是:  1、 通过直接引入less文件 重新定义 swiper-button-prev等类 或 :global ,自定义导航按钮 / 进

    2024年02月07日
    浏览(81)
  • React学习笔记(番外一)——video.js视频播放组件的入门及排坑经历

    很久没有静下心写博客了。近段时间接到一个任务,前端页面要加上视频播放功能。实现加排坑前后花了三天时间(别问我问什么这么久😂),觉得还是有必要记录一下的。 这一部分有必要写在最前面,避免你看了一长串安装、引入、代码,然后发现自己想要播放的视频格

    2024年02月02日
    浏览(47)
  • js前端获取video视频名称+时长+缩略图+宽高

    js前端获取video视频名称+时长+缩略图+宽高,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下

    2024年02月12日
    浏览(44)
  • video.js 视频截图、录制、自定义全屏,hls、flv、mp4视频播放

    功能 video.js内嵌 截图、录制功能 (图片、视频会下载到本地) 自定义全屏 播放hls、flv、mp4 功能集合成Vue组件 参考 video.js components RecordRTC demo video 截图并下载 video.js添加自定义组件的方法 使用RecordRTC对video视频进行录制 播放hls、flv、mp4 安装 引入 html 引入组件(视频地址使

    2023年04月08日
    浏览(46)
  • vue 项目中使用video实现视频播放效果暂停播放(多个视频)

    根据ref判断是否暂停状态返回 true false vue 控制video视频的播放暂停(多个视频) 安装video.js 在main.js中引用 页面

    2024年02月11日
    浏览(54)
  • video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载

    目录 1. 页面结构 2. 全屏方法 3. 截图方法 4. 样式代码 5. 效果截图 6. 附上完整代码 最近遇到的需求就是重新video标签的控制栏的样式,包括进度条、音量、倍速、全屏等样式,在正常状态下,可以将原生样式隐藏掉自定义新的控制栏元素定位上去,但是全屏后样式失效,出现

    2024年02月12日
    浏览(45)
  • Unity点击按钮控制视频播放和暂停

    省流:整体脚本放在底部,需要可直接到底部 1、导入命名空间 2、创建变量 3、第一帧开始时调用 4、每帧调用 5、定义方法OnplayorpauseVideo 6、创建图像,添加视频播放器(Video Player)组件,把脚本放到图像,把按钮添加到脚本。 完整代码

    2024年02月03日
    浏览(49)
  • 微信小程序 video 组件[播新视频旧视频暂停,再次播放延续上次播放时长]

    1、引言 微信官方文档网址:媒体组件 / video (qq.com) 2、播新视频旧视频暂停   问题: 多个视频同时播放的问题 需求:         1. 在点击播放的事件中需要找到上一个播放的视频         2. 在播放新的视频之前关闭上一个正在播放的视频 关键:         1. 如何

    2024年02月19日
    浏览(48)
  • uniapp实现视频上下滑动功能(小程序)以及video组件的暂停和播放

    uni推荐使用swiper组件实现,在video组件的下面介绍有写。 这里实现方式是: 父组件先用swiper组件实现纵向滑动,然后在每个swiper-item中插入视屏组件video-item-vx(自己定义的组件),在video-item-vx组件中实现视屏播放,具体别的细节根据需要自己实现。 注意:不能无限添加swi

    2023年04月22日
    浏览(67)
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包