react+ts使用video实现视频录制不兼容微信浏览器——loadedmetadata

最新推荐文章于 2024-08-10 07:22:29 发布
最新推荐文章于 2024-08-10 07:22:29 发布
阅读量441 收藏
点赞数
分类专栏： h5 React 文章标签： react.js 音视频 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30351747/article/details/131634046
版权
h5 同时被 2 个专栏收录
8 篇文章 1 订阅
订阅专栏
React
4 篇文章 0 订阅
订阅专栏

react+ts使用video实现视频录制不兼容微信浏览器

问题描述

react+ts使用video实现视频录制，ios和安卓浏览器都ok，安卓微信也可以，但是ios微信确认调用摄像头确认后页面不显示。

根据打印结果表示，未进入自动调用方法判断里

在这里插入图片描述

onloadedmetadata

loadedmetadata这个函数，当指定的音频/视频的元数据已加载完成时，才会触发判断里的方法。

这种获取视频的时长在其他浏览器都可以获取到视频的时长，但是在微信浏览器打开就不行

由于是视频录制功能，初始化的时候也没有视频长度，直接注释掉就ok

参考资料：微信浏览器h5 loadedmetadata 兼容性问题

Mr.Meng_95
关注
专栏目录
React中插入视频(video-react)，自动播放
weixin_44433499的博客
03-25 1万+
一. 在react中引入 安装插件 npm install –save video-react 2.在文件中引入 import { Player, ControlBar, PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled ReplayControl, // 后退按钮 ForwardControl, // 前进按钮 CurrentTimeDisplay, TimeDivider, PlaybackRateMenuButto
React+ts ref的使用
a4512af的博客
08-03 2061
在这里插入代码片 ```import React, { Component } from 'react'; import axios from 'axios'; import { RouteChildrenProps } from 'react-router-dom'; interface IPut extends RouteChildrenProps { } class Login extends Component <IPut> { // eslint-disable-ne
微信浏览器h5 loadedmetadata 兼容性问题
weixin_45191052的博客
06-15 1850
微信h5 获取视频时长兼容性
React Native Video 使用教程
gitblog_00881的博客
08-10 374
React Native Video 使用教程 react-native-videoA component for react-native项目地址:https://gitcode.com/gh_mirrors/re/react-native-video 项目介绍 react-native-video 是一个用于 React Native 的库，提供了 <Video> 组件来渲染媒...
推荐使用：react-video-recorder —— 轻松实现React视频录制功能
gitblog_00094的博客
06-01 547
推荐使用：react-video-recorder —— 轻松实现React视频录制功能 项目地址:https://gitcode.com/fbaiodias/react-video-recorder 项目介绍 react-video-recorder 是一个专为React应用程序设计的强大且易于使用的组件库，允许用户在浏览器中直接录制视频。这个开源项目旨在简化Web应用中的视频录制功能集成，提供...
获取视频时长，loadedmetadata 未监听到
Dou_Hua6的博客
11-16 1056
遇到一个特例问题，一般的都能监听到拿到视频文件信息获取视频时长，就测试突然提的说新建有问题，初次排查是视频时长没获取到，还以为哪里没不对一直没有走进。
uniapp或H5页面中，video标签在微信内置浏览器遇到的坑
u010613970的博客
01-28 2151
1、在微信内置浏览里视频被自动全屏，可在video标签上加入以下属性，uniapp或H5通用 playsinline="true" webkit-playsinline="true" x5-playsinline="true" 2、目前自动播放的问题还没找到解决的方法，求路过的大神指点一下 ...
react+ts+antd实现全选/反选操作
杜小白的博客
07-12 1940
最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤： 1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选； 2. 定义全选checkbox的change函数，为true则遍历list中所有元素，将其checked置为true，反之，置为false； 3. 定义list中单个checkbox的change函数，控制list中当前元素是否勾选，同时判断全选是否应该勾选； importReact,{useState}from'reac...
react-redux-chat：:fire::fire:React+ redux-chat模仿实现PC微信聊天系统
02-05
该示例主要使用了react，redux，iscroll，fetch等组件实现模仿实现PC微信聊天，实现了发送消息，模拟登录，临时使用fetch定时请求更新接收消息等功能，实时通讯功能还在持续更新实现中， 希望能对喜欢的React，对于...
react + ts +高德地图的使用 初次使用记录下
weixin_44070105的博客
05-20 1724
遇到坑 高德官网静态引用地图 不能使用 // 必须写上http 或https协议 而且在ts 中 AMap会标红 感谢胡哥提醒使用高德npm包 新版高德有npm 包万幸 npm i@amap/amap-jsapi-loader 封装了一个getAMap 函数 第一个参数是需要渲染地图的div 第2个是AMap.Map配置 具体配置参考高德官网 import AMapLoader from '@amap/amap-jsapi-loader'; export let getAMap ...
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程
ZQmxy的博客
03-18 3190
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程
react-videoreact一个reactweb视频播放器组件
08-15
video-react 一个react web 视频播放器组件
video-react:使用React库为HTML5世界构建的网络视频播放器
05-23
视频React Video.React是一个Web视频播放器，它是使用React库从头开始为HTML5世界而构建的。 安装 通过NPM安装video-react和对等依赖项 npm install --save video-react react react-dom 在应用程序中导入CSS或在页面中添加视频效果样式 import '~video-react/dist/video-react.css' ; // import css 或者 @import ' ~video-react/styles/scss/video-react ' ; // or import scss 或者 < link rel =" stylesheet " href =" https://video-react.github.io/assets/video-react.css " /> 导入
react-React的videojs播放器组件
08-15
React的video.js播放器组件
react 项目引入 video
樊小二的博客
06-30 1038
仅供参考： src部分直接使用 从模板位置到视频位置的路径，即可。 <video muted src='../src/assets/images/341326914.mp4' height="458" autoPlay loop style={{ padding: '20px' }} ></video> 如果直接像上面用不行的话，请先仔细检查路径是否正确。再三检查过后，webpack中再检查装载机配置。 loaders: [{ test: /\.html$/,
探索React HTML5Video：一款高效、灵活的HTML5视频组件
gitblog_00097的博客
04-18 612
探索React HTML5Video：一款高效、灵活的HTML5视频组件 react-html5videoA customizeable HTML5 Video React component with i18n and a11y.项目地址:https://gitcode.com/gh_mirrors/re/react-html5video 是一个专为React应用设计的开源组件，它使得在Web...
react中可使用的video插件
weixin_45315794的博客
08-23 9253
react中可使用的video插件 在react中使用video，并且兼容不同浏览器（特别是ie），那就不得不借助插件来实现自己的目的，下面有几个插件使用： 一、使用 video-react （在react中推荐使用） 1、直接下video-react插件 $ npm i video-react 2、在所需的插件出导入 import { Player } from "video-react"; ... return ( <Player ref={player} videoId="video-
React hook中调用摄像头 实现拍照 录制
qq_50220483的博客
05-17 2138
import {useEffect,useState} from 'react'; export default function webrtc() { const [mediaStream,setmediaStream]=useState(null); const [Stream ,setStream]=useState(false); const [videoBlob,setvideoBlob]=useState(null); const [mediaRecorder,Setm...
如何在React+TS项目中实现嵌套路由？
最新发布
09-11
在React+TS（TypeScript）项目中实现嵌套路由，通常涉及以下步骤： 1. **创建路由组件**：首先，你需要创建一个或多个组件，这些组件将作为路由的目标。 2. **定义路由配置**：在`Route`组件中，你可以通过`Routes`组件定义嵌套路由。为每个子路由指定一个路径和对应的组件。使用`Route`组件的`element`属性指定渲染哪个组件。 3. **使用`useRoutes`或`<Routes>`**：你可以使用React Router提供的`useRoutes`钩子函数或者`<Routes>`组件来配置路由。`useRoutes`可以返回一个React元素数组，而`<Routes>`则包裹`<Route>`组件。 4. **传递`children`属性**：在父`Route`元素中，通过`children`属性传递路由配置，可以实现嵌套路由。 下面是一个简单的示例，展示了如何在React+TS项目中设置嵌套路由： ```tsx import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Home, About, User, UserDetail } from './components'; // 定义嵌套路由配置 const routesConfig = [ { path: '/', element: <Home />, children: [ { path: 'about', element: <About />, }, { path: 'users', element: <User />, children: [ { path: ':userId', element: <UserDetail />, }, ], }, ], }, ]; // 使用useRoutes钩子实现路由配置 const Routing = () => { const routes = useRoutes(routesConfig); return routes; }; // 渲染Router并包裹路由配置 const App = () => { return ( <Router> <Routes> <Route path="/*" element={<Routing />} /> </Routes> </Router> ); }; export default App; ``` 在这个例子中，我们使用了`useRoutes`来定义路由配置，其中`Home`组件作为根路由，其下有两个子路由：`About`和`User`。在`User`路由下，我们又定义了一个动态路由`UserDetail`，它将匹配类似`/users/123`这样的路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值