videojs 实现自定义组件(视频画质/清晰度切换) React

这篇具有很好参考价值的文章主要介绍了videojs 实现自定义组件(视频画质/清晰度切换) React。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近使用videojs作为视频处理第三方库,用来对接m3u8视频类型。这里总结一下自定义组件遇到的问题及实现,目前看了许多文章也不全,官方文档写的也不是很详细,自己摸索了一段时间陆陆续续完成了,这是实现后的效果.

videojs 实现自定义组件(视频画质/清晰度切换) React,react.js,音视频,javascript

样式啥的自己检查后覆盖就行了,没啥说的,重点看看画质切换这个组件如何实现的。最开始我是采用函数组件直接嵌入进去,后面发现是报错的,原因是hook使用范围有误,找了半天也不知道是什么原因。后面采用继承Videojs内的menu组件来实现。

代码实现

option配置如下

 const options: any = {
    controls: true,
    preload: 'auto',
    language: 'zh-CN',
    width: 854,
    height: 480,
    playbackRates: [0.5, 0.75, 1, 1.5, 2], // 倍速数组
    controlBar: {
      children: {
        PlayToggle: true,
        CurrentTimeDisplay: true,
        DurationDisplay: true,
        ProgressControl: true,
        Quality: true,
        PlaybackRateMenuButton: true,
        volumePanel: {
          inline: false,
        },
        PictureInPictureToggle: true,
        FullscreenToggle: true,
      },
    },
  }

video组件

import { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
import videojs from 'video.js'
import Quality from './quality'

import './index.less'

interface videoComProps {
  videoOptions: any
  onReady: (player: any) => void
  src?: string
}

const VideoWrapper = (props: videoComProps, ref: ForwardedRef<any>) => {
  const { videoOptions, onReady, src } = props
  const videoRef = useRef<any>(null)
  const playerRef = useRef<any>(null)

  function toggleTv(obj: any) {
    const player = playerRef?.current
    if (!player) return
    player.src(obj.src)
    player.load(obj.load)
    player.play()
  }

  useEffect(() => {
    if (!playerRef?.current && videoRef.current) {
      // 注册组件  一定要在使用之前注册哦
      videojs.registerComponent('Quality', Quality as any)
      // 初始化video
      const player = (playerRef.current = videojs(videoRef.current, videoOptions, () => {
        onReady(player)
      }))
    }
  }, [videoRef])

  useEffect(() => {
    const player = playerRef.current
    return () => {
      // 组件销毁的时候,销毁视频播放器的实例
      if (player && !player.isDisposed()) {
        player.dispose()
        playerRef.current = null
      }
    }
  }, [playerRef])

  // ref抛出变量
  useImperativeHandle(ref, () => ({
    toggleTv,
  }))

  return (
    <div className="video-wrapper">
      <video
        ref={videoRef}
        className="video-js vjs-big-play-centered"
      >
        <source src={src} />
        {/* <span>视频走丢了,请稍后再试</span> */}
      </video>
    </div>
  )
}

export default forwardRef(VideoWrapper)

自定义组件

// 切换视频清晰度代码
import videoJs from 'video.js'
import { createRoot } from 'react-dom/client'

// 初始化清晰度按钮
const TextTrackMenuItem: any = videoJs.getComponent('TextTrackMenuItem')
const TrackButton: any = videoJs.getComponent('TrackButton')
const videoQuality = '超清,高清,自动'

class QualityTrackItem extends TextTrackMenuItem {
  constructor(player: any, options: any) {
    super(player, options)
    this.mount = this.mount.bind(this)
    player.ready(() => {
      this.mount()
    })
    this.on('dispose', () => {
      this.root.unmount()
    })
    if (options.index === 2) {
      this.addClass('vjs-selected')
    }
  }
  // 切换高清播放源,this 指向被点击QualityTrackItem实例
  handleClick(event: any) {
    // 先将所有选项的选中状态设为未选中
    this.parentComponent_.children_.forEach((c: any) => {
      c.selected(false)
    })
    // 选中当前
    this.selected(true)
    // 选中后修改按钮文本
    const btn = document.querySelector('.vjs-menu-button .vjs-icon-placeholder')
    if (!btn) return
    btn.innerHTML = this.track.label
    // 其他逻辑 通知修改视频源地址进行切换
    console.log('切换视频源')
  }
  mount() {
    this.root = createRoot(this.el()).render(<div>{this.track.label}</div>)
  }
}
// 扩展基类,实现菜单按钮
class QualityTrackButton extends TrackButton {
  constructor(player: any, options: any) {
    super(player, options)
    this.controlText('画质选择')
    this.children()[0].el().firstElementChild.innerText = '自动'
    this.addClass('vjs-quality')
  }
  createItems() {
    const qualityKeyArray = videoQuality.split(',')
    if (qualityKeyArray.length > 0) {
      const result: any = []
      qualityKeyArray.forEach((key, index: number) => {
        result.push(
          new QualityTrackItem(this.player_, {
            track: {
              label: key,
              value: key,
            },
            selectable: true,
            index,
          })
        )
      })
      return result
    } else {
      return []
    }
  }
}

export default QualityTrackButton

可能遇到的问题

1.卸载不了对应事件

  const handleUpdate = useCallback(() => {
    const player = playerRef.current
    //window.document.fullscreenElement检测视频是否正在全屏
    // console.log('播放中,当前时间是', player.currentTime())
    if (player.currentTime() > 10) {
      if (window.document.fullscreenElement) {
        // 如果是全屏 退出全屏
        window.document.exitFullscreen()
      }
      player.currentTime(10)
      setOverlay(true)
      player.pause()
    }
  }, [])
  
useEffect(() => {
    if (!playerRef?.current && videoRef.current) {
      // 注册组件  一定要在使用之前注册哦
      videojs.registerComponent('Quality', Quality as any)
      // 初始化video
      const player = (playerRef.current = videojs(videoRef.current, videoOptions, () => {
        onReady(player)
      }))
      playFlag && player.on('timeupdate', handleUpdate)
    }
  }, [videoRef])

  // 加入学习
  const handelAddLearn = () => {
    const player = playerRef.current
    player.off('timeupdate', handleUpdate)
    setPlayFlag(false)
    setOverlay(false)
    player.play()
  }

把对应需要卸载的事件采用useCallback进行处理,这样的事件的地址就不会变化造成卸载失效的问题

END

希望能帮到正在开发的伙伴们文章来源地址https://www.toymoban.com/news/detail-677645.html

到了这里,关于videojs 实现自定义组件(视频画质/清晰度切换) React的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • html5视频播放器代码实例(含倍速、清晰度切换、续播)

    本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等。  图 / html5视频播放器调用效果(倍速切换)    图

    2024年02月06日
    浏览(40)
  • 分享视频画质修复方法,视频画面由模糊变清晰

    童年经典电视剧重新上映,黄家驹演唱会31年后重映这些都是最近饱受大家关注的重大事件。而这些都是基于AI视频修复还原当初的美好,让记忆重现。也是由此发现,AI修复技术渐渐的也还是走入大家的视野,那面对家里哪些老旧的视频,我们是否也可以进行高清修复呢?

    2024年02月16日
    浏览(52)
  • Python - Real-ESRGAN 提升图像、视频清晰度 - 最高可达 4 K

    目录 一.引言 二.Real-ESRGAN 理论 1.模型简介 2.经典退化模型 ◆ 退化过程全览 ◆ K - 高斯滤波 ◆ N - 噪声 ◆ ↓r - Resize ◆ jpeg - 压缩 3.高阶退化模型 4.环形和超调伪影 5.网络结构 ◆ ESRGAN 生成器 ◆ U-Net 鉴别器 三.Real-ESRGAN 实战 1.快速体验 2.环境搭建 ◆ Package 安装 ◆ 预训练

    2024年02月04日
    浏览(42)
  • 解决moviepy保存的视频画质不清晰问题

    参考: https://blog.csdn.net/mhack5200/article/details/128666918 https://www.cnblogs.com/LaoYuanPython/p/13643497.html moviepy 函数库很坑,默认值比较低,要提高保存图像的清晰度,提高 bitrate 就好,这点指定 4000k 或者 8000k 就行了 如, bitrate=\\\'8000k\\\' 具体如下: ImageSequenceClip 是 moviepy 库中的一个类,用

    2024年04月14日
    浏览(34)
  • Unity通过改变文本Rect长宽以及缩放来改善Text(Legacy)的清晰度思路,操作以及代码实现

    前情:在最近做的一个比较大的项目中,客户要求导入各种图片以及文字。在1920X1080的情况下是采用了42号字体,提供项目后得到的反馈却是字体太糊,经询问得知1920X1080分辨率并不是使用在电脑上,而是在屏幕特别大的仿真机上运行,贴近看确实很糊,但是这个项目使用的Text(L

    2024年01月25日
    浏览(64)
  • 你知道照片怎么变清晰吗?增强照片清晰度的方法

    相信很多小伙伴都会有这种的经历,去游玩时高高兴兴的拍照留念,结果拍出来的照片不是很尽人意。或者是画面还没聚焦好,就按下快门,导致拍摄出来的照片变模糊了。很多小伙伴遇到这种情况都很烦恼,照片丢了可惜,不丢看着模糊的照片又很难受。其实我们可以通过

    2024年02月08日
    浏览(33)
  • 如何使用AI图片清晰度增强器软件增强和锐化图片、提高照片清晰度并去除噪点

    通过使用深度学习AI算法对照片进行批量锐化、去噪和去模糊处理,该程序可以应用再大部分照片和图片,包括徽标、卡通和动漫 可能很多朋友都会遇到需要批量增强和锐化照片的情况:例如,如果拍摄过程中曝光不足、夜晚噪点多或者画面模糊等等。普通的照片处理软件使

    2024年02月06日
    浏览(49)
  • 解决Canvas画图清晰度问题

    最近在开发Web端远程桌面的时候遇到的一个问题,解决记录一下,分享给各位有需要用到的朋友。 先吹下水:远程桌面的连接我们是通过Websocket连接后,后端不断返回远程端的界面二进制数据流,我接收到之后转为图像,画到Canvas中,然后对canvas进行一系列的事件监听,传递

    2024年01月21日
    浏览(40)
  • Halcon清晰度检测Demo

    此实例通过使用Halcon实现5种清晰度算法函数: 1. 方差算法函数; 2. 拉普拉斯能量函数; 3. 能量梯度函数; 4. Brenner函数; 5. Tenegrad函数; 测试效果如下图片;找到峰值对应的那张图,确实是最清晰的那张;使用直方图显示清晰度结果,如果有更好的方法,那就跟帖回复吧。

    2023年04月25日
    浏览(38)
  • WebRTC清晰度和流畅度

    WebRTC清晰度和流畅度 flyfish WebRTC提供了4种模式DISABLED,MAINTAIN_FRAMERATE,MAINTAIN_RESOLUTION,BALANCED 接口是 根据源码 接口这里不是一一对应的kDetailed和kText是类似的 使用方法 上述代码video_track创建好之后,调用 参考 https://w3c.github.io/webrtc-pc/#idl-def-rtcdegradationpreference https://crbug.co

    2024年02月10日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包