react中使用video标签显示本地视频不生效问题

最新推荐文章于 2023-12-05 20:28:23 发布
最新推荐文章于 2023-12-05 20:28:23 发布
阅读量3.8k 收藏 4
点赞数
分类专栏： React 文章标签： react HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45538554/article/details/119733960
版权
本文介绍了在React应用中，如何动态加载视频资源。通过对比require和import两种方式，发现require能在运行时加载资源，解决了视频源无法直接在src中输入字符串的问题。文中提供了两种实现方式，并分享了解决问题的过程，对于前端开发者理解模块导入和资源加载有一定帮助。
摘要由CSDN通过智能技术生成

src中直接输入字符串视频地址不能播放，但是通过import的导入却是可以的。
但是import只能写在文件最顶端，所以就想到使用require。没想到还真成功了！感谢自己的坚持！

方式1：
let source = require('../assets/WeChatvideo.mp4');
<video id="playChatVideo"  width="320" height="240" controls>
  <source src={source} type="video/mp4"></source>
</video>
方式2：
<video id="playChatVideo"  width="320" height="240" controls>
  <source src={require('../assets/WeChatvideo.mp4')} type="video/mp4"></source>
</video>

受启发自：
https://sleepingbug.blog.csdn.net/article/details/111566703

建筑转Java-张无忌
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
react引入本地mp4视频
qq_41672008的博客
05-16 8267
react引入本地mp4视频 相信有时候在react中使用video标签会导致视频无法播放的问题 在react项目里边引入本地mp4视频有两种方法 1.直接本地引入 // app.js <video src={require('../asset/24783431-1-80.mp4').default} controls></video> // 形式上基本是这样 <video src={require(mp4视频的路径).default} controls></v
基于 React video 视频打点
小王的技术库
10-13 1516
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
react中使用video.js，排坑记录
qq_60178319的博客
10-09 1369
在React中使用video.js，bug记录
react-videoreact一个reactweb视频播放器组件
08-15
video-react 一个react web 视频播放器组件
react 原生video标签用法
u011561536的专栏
08-23 616
禁止鼠标右键，禁止下载等菜单展示，禁止画中画。
react项目 引入本地mp4 无法正常播放
m0_47524246的博客
02-18 2047
react项目 引入本地mp4 报错，无法正常播放 查看 config.ts中没有专门针对mp4去做配置， 新的改变 代码如下： conf.module .rule('mp4') .test(/\.(mp4|zip)(\?.*)?$/) .use(require('url-loader')) .loader('url-loader') .options({ name: 'static/[name].[hash:8].[ext]
video或audio标签加载本地资源不能播放问题
6块腹肌的博客
09-24 6227
因为安全性的问题，js是没有权限直接访问本地资源的，所以直接将资源的相对路径或者绝对路径给src都不能播放视频音频。可以使用URL.createObjectURL来进行处理，如下vue实例： <input type="file" @change="upload"> <video controls :src="mp4URL"></video> <scr...
Video 标签控件 react-native-video.zip
09-17
Video 标签控件 react-native-video ,react-native-video 是 标签控件。示例：// Within your rende...
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...
react-native-video使用攻略
hahahhahahahha123456的博客
03-02 3094
源码在此 仅供参考 一、简介 react-native-video是一个可以播放视频的组件，它的用法简单，功能完备，是React native项目中很好用的一个Video播放的组件。 它的功能主要有以下10个： 控制播放速率 控制音量大小 支持静音功能 支持播放和暂停 支持后台音频播放 支持定制样式，比如设置宽高 丰富的事件调用，如onLoad，onEnd，onProgress...
react-React的videojs播放器组件
08-15
React的video.js播放器组件
react-player：一个React组件，用于播放各种URL，包括文件路径
02-05
不使用React吗？ 迁移到ReactPlayer v2.0 ReactPlayer v2.0更改了单个播放器的导入并添加了延迟加载的播放器。 还取消了对preload支持，以及其他一些更改。 有关信息，请参见 。 用法 npm install react-player #...
react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
qq519133962的博客
11-23 1935
react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成 1.index.html引入阿里播放器的cdn <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" /> 2.创建播放器组件 需要播放器其他方法的可以参考阿里播放器SDK 阿里播放器SDK import React from 'react
React | 在react中使用Video标签进行拍照生成Base64图片
weixin_44953227的博客
06-06 7133
功能 效果图 代码 点击一个按弹出一个框可以点击拍照生成Base64图片 效果图 上代码 回到顶部 import React, { PureComponent, Fragment } from 'react'; import { Button, Row, Col } from 'antd' // import avatar from './avatar.png' // 背景图 //视频流 let trackStrem /** * 批量新增格子 * @param {onChange} fu
前端使用 video标签 设置 autoplay 无法自动播放
weixin_43940592的博客
03-29 1182
如果你使用video标签又设置 autoplay 属性 还是无法播放 尝试在标签上添加 muted属性 function App () { return ( <> <ReactPlayer url={url} playing={true} muted={true} /> </> ) } 我的问题就被解决了 https://www.theverge.com/2018/3/22/17150870/google-chrome-autopla
react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline？
zz130428的博客
12-06 1309
如果在react中这么样写： 在react 15中将被渲染成： 在react 16及之后的版本中将被渲染成： 但这个会有限制，如果自定义的属性不是 , 或者 ，该属性依然会被忽略。所以目前可以这样添加 webkit-playsinline 属性： 另外，还可以通过 进行设置，比如：
react中对video监听事件
Cvory
10-25 4443
需求：想要获取video的时长，但是使用 const ele = document.getElementById('player'); const time=ele.duration 得到的记过不稳定 有时候会拿到时长，有时候是NAN 解决方案： 在componentDidMount里面对监听进行注册 当视频加载完成 就可以拿到视频时长了 其他的事件监听可以参考这个方式，下面是一些video...
react项目中使用video标签设置自动播放并未及时播放解决
最新发布
YanHSama的博客
12-05 948
react项目中使用video标签设置autoplay,但是视频不会直接播放，会加载一段时间后才会自动播放。手动调用play方法。
react搭配h5原生video标签手写网页播放器
u011070165的专栏
10-27 5710
react搭配h5原生video标签手写网页播放器。本次开发，主要是用node做项目的依赖管理，同时使用webpack进行打包。请确保运行项目前已安装这两样利器。项目结构深坑整个项目过程还算流畅，唯独在处理全屏状态下监听esc和f11按键的时候多花了点时间
react使用video标签播放base64文件流
06-06
好的，您可以通过以下步骤在React中使用video标签播放base64文件流： 1. 将base64文件流转换为Blob对象。 ```javascript const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, { type: contentType }); return blob; }; ``` 2. 将Blob对象转换为Object URL。 ```javascript const blob = b64toBlob(base64Data, 'video/mp4'); const url = URL.createObjectURL(blob); ``` 3. 在video标签中使用Object URL。 ```jsx <video controls> <source src={url} type="video/mp4" /> </video> ``` 完整示例代码： ```jsx import React from 'react'; const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, { type: contentType }); return blob; }; const VideoPlayer = ({ base64Data }) => { const blob = b64toBlob(base64Data, 'video/mp4'); const url = URL.createObjectURL(blob); return ( <video controls> <source src={url} type="video/mp4" /> </video> ); }; export default VideoPlayer; ``` 希望能够帮助到您！
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

建筑转Java-张无忌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值