video 使用hls时报错--Uncaught (in promise) DOMException: play() failed because the user didn‘t interact

原创 已于 2023-09-04 11:20:16 修改 · 420 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2023-09-04 11:19:41 首次发布

浏览器不允许视频有声音时自动播放，所以给视频静音后即可自动播放

<video muted></video>

然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频。或者让controls控件的音量控件显示出来，手动调整音量大小。

uniapp - 使用 ＜video＞ 播放视频黑屏，浏览器控制台报错： DOMException: The element has on supported sources.（详细完美解决方案）
高级前端工程师
10-24 6918
uniapp video 视频播放黑屏，uniapp 报错DOMException: The element has on supported sources.，uniapp如何解决DOMException: The element has on supported sources.，uniapp使用video标签无法播放视频出现黑屏问题处理，uniapp解决video视频黑屏显示0秒，并且浏览器报错DOMException: The element has on supported sources.，un
videojs播放m3u8格式的视频，处理 HLS 推流延时问题
cczz66的博客
12-23 4970
HLS 直播协议的原理理解： 把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果； 分析延时原因： 服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时， 分析视频组件工作流程： 请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流； 挂载视频组件， 播放视频，...
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document...
weixin_33887443的博客
12-03 7605
最近在开发一个网站时，有个需要是 如果有新预警信息要在网页中播放提示音。页面打开会请求是否有新信息，有则播放提示音。在Chrome的最新浏览器中，播放会报错，控制台显示Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.搜索发现Chrom...
【大前端++】vue:409 Uncaught (in promise) NotAllowedError: play() failed because the user didn‘t
最新发布
产品：SmartApi；服务：大前端++；其他技术分享
09-20 937
浏览器禁止无声交互前自动播放有声媒体；先静音/等用户点/捕获错误引导，三种姿势任选即可消除。play() {');},
jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
weixin_45651609的博客
09-11 3万+
jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
html5 autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn't interac
热门推荐
red_heel的博客
05-30 6万+
Chrome的autoplay政策在2018年4月做了更改。新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单1. muted autoplay始终被允许2. 音乐的autoplay 只有在下面集中情况下起作用：    1. 有用户行为发生像（click,tap,etc）.    2. 对于桌面程序，用户已经提前播放了音频...
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
sjslln的博客
09-04 3万+
audio.html:43 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
精选资源
videojs-hls-quality-selector:为videojs中播放的HLS源添加质量选择器菜单。 需要`videojs-contrib-quality-levels`插件
04-28
videojs-hls质量选择器 注意：由于从videojs-contrib-hls转到videojs/http-streaming ，v1.xx仅与VideoJS 7.x兼容。 对于VideoJS v5或v6支持，请使用v0.xx标签。 描述 为videojs中播放的HLS源添加质量选择器菜单。 ...
精选资源
PHP-FFmpeg-video-streaming::videocassette:使用FFmpeg打包媒体内容以进行在线流式传输（DASH和HLS）
05-13
该库是的包装，并封装了用于在线流式传输的媒体内容，例如DASH和HLS。 您也可以将用于HLS打包。 有几个选项可以从云中打开文件，也可以将文件保存到云中。 提供了描述所有功能和组件的。 对于使用加密和DRM，我...
videojs-contrib-hls.js资源
10-23
《videojs-contrib-hls.js：实现HLS直播流播放的关键技术》 在现代网络视频播放领域，HTML5的Video元素已经成为了主流，然而对于HTTP Live Streaming（HLS）这种流媒体协议的支持，浏览器原生并不完全兼容。为了...
Vitis HLS 学习笔记--数据类型（矢量 hls::vector）
hi94的博客
06-11 1282
在 Vitis HLS 中，矢量数据类型提供了一种高效的数据处理方式，允许开发者利用 SIMD 操作一次性处理多个数据元素。通过使用 hls::vector，开发者可以创建一个由 N 个类型为 T 的元素组成的矢量。这种数据结构在内存中连续存储，且当元素类型和数量都是 2 的幂时，对齐到其总大小，可以实现最优的内存访问效率。
[已解决]Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
a474416564的博客
02-17 1845
上面代码是地址，下面是js操作。如果是mp3文件source中的type要改为audio/mpeg。 在谷歌浏览器页面跳转有效果，但是刷新页面时会报错，不知原因. 有个坑就是firefox浏览器不识别MP3，得用wav文件。
autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn‘t interac
总结前端开发中遇到的问题，分享前端知识
06-06 4266
浏览器提示报错-->Uncaught (in promise) DOMException: play() failed because the user didn't interac 分析：浏览器为了提高用户体验，减少性能消耗，只有在发生用户行为的时候才可以播放音频或视频。而页面加载，定时请求不属于用户行为，因此被禁止自动播放......
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
weixin_45337447的博客
07-04 5222
属性指向一个音频文件，使它播放音频。为了给用户比较好的体验，这个音频文件最好是一个空的音频文件，即没有音频内容的文件，时长也尽可能短一点，比如。解决因为浏览器限制不能自动播放音频视频的缺陷，最主要还是因为需求不然谁闲着饶这么大的弯子去这么搞，废话不多说了。属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将。播放了这个音频文件后，就能触发网页播放音频的权限，这样再来播放视频或音频，就没有问题了。*注意该方案只适用于本地调试。
音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ...
weixin_30478619的博客
11-29 2万+
<audio id="play" controls="controls" loop="loop"> <source src="horse.mp3" type="audio/mpeg"> </audio>浏览器出现：Uncaught (in promise) DOMException: play() failed because the user di...
[2023，最新，已解决]Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
m0_55804319的博客
04-04 1182
之前谷歌浏览器打开就播放声音，调用 audio.play()报错，因为需要click嘛，我们就在 这里改一下设置就好了！！！！！！！
Uncaught (in promise) DOMException: play() failed because the user didn‘t in
qq_43175672的博客
01-26 2万+
现代浏览器为了提高用户体验和防止滥用自动播放，通常会在没有用户交互的情况下阻止自动播放视频，并要求在播放之前有用户交互。可以把视频设置为静音状态，添加。
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(); 然后就给我报
index.vue:44 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document
01-16
### 解决浏览器中播放音频或视频时因用户未与文档交互而引发的 NotAllowedError 错误 现代浏览器为了提升用户体验并减少不必要的资源消耗，实施了严格的自动播放策略。当尝试调用 `play()` 方法但在之前没有任何用户互动发生时，可能会抛出 `NotAllowedError` 或者类似的异常[^1]。 #### 使用静默播放模式 一种常见的解决方案是在首次播放媒体文件时不发出声音： ```javascript videoElement.muted = true; videoElement.play(); ``` 这允许视频在没有用户交互的情况下启动播放，但需要注意的是，某些浏览器仍然可能阻止这种行为取决于其具体实现和配置。 #### 请求用户交互触发播放 另一种方法是等待用户的第一次点击或其他形式的操作来初始化多媒体内容的回放过程。可以通过监听按钮或者其他可点击元素上的事件来进行处理： ```html <button id="startVideo">Start Video</button> <video id="myVideo"></video> <script type="text/javascript"> document.getElementById('startVideo').addEventListener('click', function () { const video = document.getElementById('myVideo'); video.play().catch(error => console.log(`Playback failed: ${error}`)); }); </script> ``` 这种方法确保了只有在获得明确许可之后才会执行实际的播放操作，从而避免违反浏览器的安全政策。 #### 修改服务器响应头 对于 HTTP Live Streaming (HLS) 和其他流式传输协议的支持情况，有时调整 Web 服务器返回给客户端的数据包头部信息也能帮助解决问题。特别是设置正确的 MIME 类型可以改善兼容性和性能表现。 例如，在 Nginx 中添加如下配置项： ```nginx location /hls/ { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } } ``` 不过上述措施主要针对特定类型的流媒体服务，并不直接关联到解决由缺乏初始用户动作所引起的不允许播放错误上。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值