关于video在无用户交互的情况下，执行play方法报错的问题

已于 2023-10-25 09:47:44 修改
阅读量615 收藏
点赞数
文章标签： 前端
于 2023-09-26 15:20:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lth002/article/details/133310900
版权

媒体流播放视频

this.localStream = new MediaStream();
this.video.srcObject = this.localStream;

无法播放视频

刷新了页面，在不进行任何操作的情况下报错

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

解决方法

//给video标签添加 muted静音属性
<video muted id="player"></video>
//这种方式竟然不生效
this.video.setAttribute("muted","muted ")
奶昔不会射手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
video 标签在谷歌浏览器下报错 DOMException: play() failed because the user didn't interact
小白阿里里的博客
05-06 2543
查阅了很多博客上面都说是因为 Google Chrome 2018年1月起不再自动播放内容， 然而按照上面的解决方法在浏览器搜索框中输入：chrome://flags/ 方法是不行的 在尝试了许久之后得到以下两种解决方案可供参考： 方案一： 如果视频本身是没有声音的那么直接在 video 标签中加入 muted 即可解决 <video src="..." autoplay="autoplay...
vue-video-play.rar
11-20
这个压缩包"vue-video-play.rar"可能包含了该组件的源代码、示例、文档和其他相关资源，虽然描述中提到“不要下”，但为了理解Vue Video Play的工作原理和使用方法，我们依然可以探讨相关的知识点。 首先，Vue.js ...
audio或video标签 autoplay无效 或 .play()报错问题 解决方案
热门推荐
苍老师背后的男人
11-02 3万+
video标签 video标签设置 autoplay 无效，一般的解决办法是 在video标签上设置 muted 属性 即可。 muted 属性是 静音的意思 也就是说，想让video标签自动播放视频，必须先设置为静音。原因下面一起说。 audio标签 audio标签设置 autoplay 无效，或者在 js 中用 audio.play() 报以下错误： 而且audio标签 即使设置了 muted 属性也不能自动播放（解决方法最后说）。 原因分析 其实从报错信息也可以了解到，DO..
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new WebViewClient() { // autoplay when finished loading via javascript injection public void onPageFinished(WebView view, String url) { mPlayer.loadUrl(
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
最新发布
先飞网校
02-05 1958
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误
weixin_42398560的博客
09-15 1万+
解决方法：给video标签加入<video muted></video> 静音即可。 Chrome 66为了避免标签产生随机噪音。
video标签的play方法报错:Uncaught (in promise) DOMException play() failed because the user didnt interact
业余前端的职业经历
05-28 1万+
最近有个在页面上展示视频的需求，是让用户一开始进入页面的时候就进行播放。 其实忘了 video 标签有个 autoplay的属性 暂且忽略这个吧 然后就是使用哪个paly 方法 进行控制播放 <video controls class="video"> <source src="../../video/douyin.mp4" type="video/mp4"> </video> // js代码 $('.video')[0].play(); 然后就给我报
Audio或video标签 autoplay无效 或 .play()报错问题
Dyaping的博客
04-22 1113
udio或video标签 autoplay无效 或 .play()报错问题
html5 video标签不能播放视频,h5 video 视频不能正常播放
weixin_39872624的博客
06-10 1784
在页面中用video标签嵌入了一个视频：其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的。这个页面用ios自带的浏览器和qq直接打开时，视频都能正常播放，但是在微信打开，视频就无法播放。安卓都能正常播放。以下代码是用于视频播放的：function audioPlay() {var video = document.getElemen...
play() failed because the user didn‘t interact with the document优化媒体不能自动播放
wzp20092009的博客
09-14 1万+
谷歌浏览器 video 元素设置 autoplay，我们原意是希望页面加载时自动播放，但实际上并没有自动播放，在控制台报错如下： Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 这里的意思是，是因为用户没有先和网页交互所以播放失败。
vue中使用video-player无法播放视频
lyh135923的博客
04-30 2万+
本篇是关于在vue项目中使用video-player遇到的坑 本文分三个部分： 一：如何使用video-player 二：遇到的坑一 三：遇到的坑二 使用video-player 1. 先安装插件 npm install video.js --save npm install vue-video-player --save 2.在main.js中使用video-player ...
canvas.toDataURL image/png 报错处理方法推荐
01-21
问题背景： 遇到一个需求，要对播放的视频进行截图，视频使用video标签来播放，然后点击视频播放区域时截取实时的帧图片。 代码很简单如下： JavaScript Code复制内容到剪贴板 var video = document....
VOD.rar_vod_vod video play
09-20
"VOD.rar_vod_vod video play"的标题暗示了这是一个关于VOD视频播放的项目或解决方案，可能是包含了播放器和控制组件的源代码或者配置文件。 在描述中提到的“vod 视频播放,大家参考一下”，这可能是一个开源或者...
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
HGGshiwo的博客
01-11 1万+
原因是：video.play是一个promise，因此错误需要在结束以后catch。然后再次调用play函数即可。
关于webRTC中video的使用实践
weixin_30872733的博客
07-18 341
此次demo使用chrome49调试测试 前端在操作视频输入，音频输入，输出上一直是比较弱的，或者说很难进行相关的操作，经过我最近的一些研究发现，在PC上实际上是可以实现这一系列的功能的，其实现原理主要是得益于google的webRTC技术。 什么是webRTC WebRTC，名称源自网页即时通讯（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器...
解决video视频在ios中不能自动播放的问题
weixin_43961899的博客
11-29 1万+
视频在 safri 页面不能自动播放的原因： 因为ios中明确的指出等待用户的交互动作后才能播放video，也就是说没有得到用户的action就播放的话会被safri拦截 解决方法如下： 因为这个是微信的链接，需要在微信上点开进入他的浏览器，这里需要一个插件 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type=...
H5视频、音频不能自动播放,Uncaught (in promise) DOMException: play() failed because the user didn't...
weixin_30772105的博客
09-13 3996
错误原因：Chrome的autoplay政策在2018年4月做了更改。 解决办法： 第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy 第二步，在Autoplay policy中将Default改为No user gesture is required 第三步，点击下方的“RELAUNCH NOW”,就大功告成了！ ...
使用video标签时报错 Uncaught (in promise) DOMException
weixin_43795169的博客
05-14 9644
问题 <video id="video" preload> <source src="1.mp4"></source> </video> play(){ var video=document.geiElementById('video'); video.play(); //播发视频 // video.pause(); //停止播放 } 运行时报错 Uncaught (in promise) DOMException 原因
vue-video-player 引入报错 出现没有video.js 的问题、
05-13
可能是因为你没有正确引入 `video.js` 库。`vue-video-player` 是基于 `video.js` 的，所以必须先引入 `video.js`，才能引入 `vue-video-player`。 你可以先在 HTML 中引入 `video.js`，再引入 `vue-video-player`。具体操作如下： 1. 在 HTML 中引入 `video.js` 库。你可以从官网下载或者使用 CDN 引入： ```html <!-- 从官网下载的方式 --> <script src="/path/to/video.js"></script> <!-- 使用 CDN 的方式 --> <script src="https://cdn.jsdelivr.net/npm/video.js/dist/video.min.js"></script> ``` 2. 在 HTML 中引入 `vue-video-player`： ```html <script src="https://cdn.jsdelivr.net/npm/vue-video-player"></script> ``` 如果还有问题，可以提供具体的错误信息或者代码，我可以帮你进一步排查。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值