react中对video监听事件

最新推荐文章于 2024-06-20 15:24:35 发布
最新推荐文章于 2024-06-20 15:24:35 发布
阅读量4.4k 收藏 1
点赞数 1
分类专栏： web前端 react 文章标签： web前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/102742371
版权

需求：想要获取video的时长，但是使用

const ele = document.getElementById('player');
const time=ele.duration

得到的结果不稳定 有时候会拿到时长，有时候是NAN

解决方案：


在componentDidMount里面对监听进行注册
在这里插入图片描述
当视频加载完成 就可以拿到视频时长了

其他的事件监听可以参考这个方式，下面是一些video的其他监听事件（不全）
在这里插入图片描述

cvory
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于 React video 视频打点
小王的技术库
10-13 1513
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
上传时获取video视频时长
qq_43803680的博客
03-31 3045
上传时获取video视频时长
React 视频播放器：实现单视频播放与控制
最新发布
adu1561843018的博客
06-20 481
react创建视频播放器
video-react
qq_46199782的博客
03-14 3441
video-react 使用指南
react中使用video标签显示本地视频不生效问题
weixin_45538554的博客
08-16 3807
src中直接输入字符串视频地址不能播放，但是通过import的导入却是可以的。 但是import只能写在文件最顶端，所以就想到使用require。没想到还真成功了！感谢自己的坚持！ let source = require('../assets/WeChatvideo.mp4'); <video id="playChatVideo" width="320" height="240" controls> <source src={source} type="video/mp4">
基于react的hooks搭建video.js观看视屏并增加相关配置并实时更新和禁止拖动快进和切换视屏倍速配置
KisJLLLLLL的博客
04-18 345
由于最近接了个项目里面需要观看视屏记录学分等功能，就想着用video.js来进行观看视屏，但是网上查询用到的都是原生的，这边来增加一个通过react hooks进行观看视屏的配置 ，并展示如何定时器更新并记录观看视屏的进度，并且阻止拖动进度条快进功能⬇️。判断当前看视屏的最大事件 接口获取，如果没有最大进度就为0，每次拖动获取当前时间，如果大于最大2，就表示快进了，回到当前的最大事件，如果不大于，并且当前时间大于最大时间，则把当前最大的时间设置为现在观看的时间。5秒实时更新的关键代码。
简单易用的ReactNative截屏监听系统截屏事件组件iosandroid
08-10
在这个特定的场景中，我们讨论的是一个React Native组件，它专注于实现截屏功能并监听系统截屏事件，对于iOS和Android平台都适用。 这个组件名为"react-native-screenshot"，其主要功能是提供一种方式来检测用户...
video-service:React中的视频服务
05-22
这涉及到对`video`元素的事件监听（如`play`、`pause`、`ended`），以及设置和获取视频属性（如`currentTime`、`duration`）。 2. **Fetch或AXIOS**：获取视频资源可能需要向服务器发送请求，这通常通过Fetch API或...
react-native-video实现视频全屏播放的方法
08-27
在实现视频全屏播放时，需要监听设备的屏幕旋转事件，可以使用 react-native-orientation 库来监听设备的屏幕旋转事件。这样，在设备屏幕旋转时，可以及时获取到改变后的宽高，并刷新 UI，视频就能全屏展示了。 ...
react-native-video.zip
08-19
3. **事件监听**：React Native Video提供了一系列的事件，如`onLoadStart`、`onLoad`、`onProgress`、`onEnd`等，这些事件可以帮助开发者跟踪视频的加载和播放状态，实现更复杂的交互逻辑。 4. **样式和布局**：...
vue获取video视频时长和当前播放进度时间，解决出现NaN或者undefined的问题
热门推荐
seeeeeeeeeee的博客
12-16 1万+
video标签添加canplay事件 canplay：视频准备就绪可以播放的时候触发的事件 <video src="../video/1.mp4" controls="controls" width="100%" autoplay @canplay="getVidDur()" id="myvideo" ></video> js 这里
在vue项目中获取＜video＞标签duration属性值为NaN或者undefined
qq_43532117的博客
11-24 6125
在vue项目中获取标签duration属性值为NaN或者undefined 出现的问题 在vue项目中获取<video>的duration属性值的方式有很多，但是在某些特定的方式下去获取duration的值可能会出现NaN或者undefined的情况。 下面会列出获取duration的方式及注意事项 获取duration的方式及注意事项 方式一： 使用@绑定canplay事件 页面组件代码： <template> <div> <video
操作视频的开始与暂停
wbskb的博客
09-03 1656
操作视频的开始与暂停：通过 useRef 创建的 ref 操作视频的开始与暂停。- **调用 `ref.current.play()` 方法来播放视频；** - **如果视频需要暂停，我们调用 `ref.current.pause()` 方法来暂停视频**。
基于video+flv.js+react-player插件的视频自定义控件 用户选择播放开始时间和结束时间
weixin_44685906的博客
08-05 1671
react-player+flv.js+video
react 移动端 实现video的自动播放
琞、小菜
10-16 4843
之前因为要实现视频的自动播放，就先做了一个原生的视频自动播放demo，但是真的想要在实际的项目中实现起来就步步是坑。坑，我已经踩过了，在这里分享一下react在移动端中如何实现视频的自动播放。 项目背景 这个项目是react结合Ios和Android实现的一个APP，应甲方爸爸的要求，实现一个朋友圈内视频的自动播放。大概就是这个样式。 需求分析 当拿到需求的时候第一反应应该就是去百度了吧。网上有很...
react视频播放组件
xiao白的博客
04-13 6752
通过NPM安装视频反应和对等依赖项 npm install--save video-react react react-dom redux <link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />(在index.html引入) import React ...
React视频播放器
Web 开发&软件开发
08-05 3882
反应视频播放器 作为消费者和网络开发人员，流媒体娱乐是我的巨大兴趣。 我对流媒体娱乐的热爱可以追溯到RealPlayer的早期以及一百万个编解码器的痛苦。 快进到今天，我正在与ReactJS以及YouTube，Twitch，Facebook等数十种流技术进行大量合作。 这使我想到：是否有很好的开源组件来嵌入流行视频提供商的视频？ 让我们看看ReactPlayer ，这是一个非常简单但有用的...
React学习笔记（番外一）——video.js视频播放组件的入门及排坑经历
石沉溪洞
11-06 7485
video.js视频播放组件的入门及排坑经历
react 中 多个video自带全屏 点击全屏时调用方法
05-27
在 React 中，你可以使用类组件或函数组件来实现多个 video 自带全屏并在点击全屏时调用方法。以下是一个使用类组件的示例： ```javascript import React, { Component } from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; class VideoPlayer extends Component { constructor(props) { super(props); this.videoRef = React.createRef(); } componentDidMount() { this.player = videojs(this.videoRef.current, this.props, function onPlayerReady() { console.log('Player is ready'); }); this.player.on('fullscreenchange', this.handleFullscreenChange); } componentWillUnmount() { if (this.player) { this.player.dispose(); } } handleFullscreenChange = () => { if (this.player.isFullscreen()) { // 进入全屏模式时调用的方法 } else { // 退出全屏模式时调用的方法 } }; render() { return ( <div data-vjs-player> <video ref={this.videoRef} className="video-js vjs-default-skin" controls> <source src={this.props.src} type="video/mp4" /> </video> </div> ); } } export default VideoPlayer; ``` 在这个示例中，我们使用了 video.js 播放器库来创建视频播放器。我们通过 `videoRef` 引用 video 元素，然后在 `componentDidMount` 生命周期方法中创建 video.js 播放器实例。我们还添加了一个 `fullscreenchange` 事件监听器，该监听器将在进入或退出全屏模式时触发，并调用 `handleFullscreenChange` 方法。 为了在应用中使用多个视频播放器，你可以在父组件中渲染多个 `VideoPlayer` 组件。例如： ```javascript import React, { Component } from 'react'; import VideoPlayer from './VideoPlayer'; class App extends Component { render() { return ( <div> <VideoPlayer src="video1.mp4" /> <VideoPlayer src="video2.mp4" /> </div> ); } } export default App; ``` 这将在应用中渲染两个视频播放器，每个播放器都可以自带全屏，并在进入或退出全屏模式时调用相应的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值