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

已于 2023-09-04 11:20:16 修改
阅读量263 收藏
点赞数
分类专栏： m3u8 video 文章标签： javascript 前端
于 2023-09-04 11:19:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69439101/article/details/132665506
版权

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

<video muted></video>

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

努力进阶的快快~
关注
专栏目录
videojs播放m3u8格式的视频，处理 HLS 推流延时问题
cczz66的博客
12-23 4510
HLS 直播协议的原理理解： 把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果； 分析延时原因： 服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时， 分析视频组件工作流程： 请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流； 挂载视频组件， 播放视频，...
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源添加质量选择器菜单。 ...
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document...
weixin_33887443的博客
12-03 7342
最近在开发一个网站时，有个需要是 如果有新预警信息要在网页中播放提示音。页面打开会请求是否有新信息，有则播放提示音。在Chrome的最新浏览器中，播放会报错，控制台显示Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.搜索发现Chrom...
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. 对于桌面程序，用户已经提前播放了音频...
jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
weixin_45651609的博客
09-11 2万+
jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
sjslln的博客
09-04 1万+
audio.html:43 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
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）这种流媒体协议的支持，浏览器原生并不完全兼容。为了...
用MATLAB实现数组的迭代运算代码-RFNoC-HLS-ATSC-RX:RFNoC-HLS-ATSC-RX
05-20
用MATLAB实现层叠的迭代运算代码RFNoC-HLS-ATSC-RX 安德鲁·瓦伦苏埃拉·兰兹（Andrew Valenzuela Lanez）| Sachin Bharadwaj Sundramurthy | Alireza Khodamoradi | 关于 此仓库包含用于GNU Radio的RFNoC atsc_rx ...
hls-video-test:测试 HLS 视频流
06-22
使用 Video.js 进行 HLS 测试 如何 如果您的系统上尚未安装 Node，请安装 安装 grunt： npm install -g grunt-cli 在根目录中运行npm install以安装所有依赖项 跑grunt 在浏览器中打开localhost:9999
[已解决]Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
a474416564的博客
02-17 1710
上面代码是地址，下面是js操作。如果是mp3文件source中的type要改为audio/mpeg。 在谷歌浏览器页面跳转有效果，但是刷新页面时会报错，不知原因. 有个坑就是firefox浏览器不识别MP3，得用wav文件。
autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn‘t interac
总结前端开发中遇到的问题，分享前端知识
06-06 4000
浏览器提示报错-->Uncaught (in promise) DOMException: play() failed because the user didn't interac 分析：浏览器为了提高用户体验，减少性能消耗，只有在发生用户行为的时候才可以播放音频或视频。而页面加载，定时请求不属于用户行为，因此被禁止自动播放......
音频播放时出现 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...
Uncaught (in promise) DOMException: play() failed because the user didn‘t in
qq_43175672的博客
01-26 793
现代浏览器为了提高用户体验和防止滥用自动播放，通常会在没有用户交互的情况下阻止自动播放视频，并要求在播放之前有用户交互。可以把视频设置为静音状态，添加。
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact
weixin_45337447的博客
07-04 4951
属性指向一个音频文件，使它播放音频。为了给用户比较好的体验，这个音频文件最好是一个空的音频文件，即没有音频内容的文件，时长也尽可能短一点，比如。解决因为浏览器限制不能自动播放音频视频的缺陷，最主要还是因为需求不然谁闲着饶这么大的弯子去这么搞，废话不多说了。属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将。播放了这个音频文件后，就能触发网页播放音频的权限，这样再来播放视频或音频，就没有问题了。*注意该方案只适用于本地调试。
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(); 然后就给我报
H5视频、音频不能自动播放,Uncaught (in promise) DOMException: play() failed because the user didn't...
weixin_30772105的博客
09-13 4048
错误原因：Chrome的autoplay政策在2018年4月做了更改。 解决办法： 第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy 第二步，在Autoplay policy中将Default改为No user gesture is required 第三步，点击下方的“RELAUNCH NOW”,就大功告成了！ ...
chunk-vendors.js:21232 Uncaught (in promise) DOMException: The element has no supported sources.
最新发布
06-26
这个错误通常出现在JavaScript中处理HTML5的Media Elements（如`<audio>`或`<video>`），特别是当你尝试加载一个不被浏览器支持的媒体源时。`DOMException: The element has no supported sources`表明某个元素（在这个例子中可能是`chunk-vendors.js:21232`中的某个video或audio标签）的`src`属性指定的URL格式或编码格式是浏览器不支持的。 具体到`chunk-vendors.js:21232`，这可能是一个动态加载的脚本文件，其中包含了一个媒体资源相关的代码。出错的行号21232可能指向一个试图初始化视频播放器的代码部分，这个位置没有找到浏览器支持的视频源。 解决这个问题的步骤包括： 1. **检查src路径和格式**：确认`chunk-vendors.js:21232`处的`src`引用的视频文件是否是常见的格式，如MP4、WebM等，并且文件存在且可访问。 2. **浏览器兼容性**：确保你使用的媒体源格式在目标浏览器中有良好的支持。某些旧版浏览器可能不支持某些现代格式，比如Ogg。 3. **使用polyfill**：如果需要支持特定的媒体格式，可以考虑使用像`videojs-contrib-hls`这样的库来提供跨浏览器的HLS流支持。 4. **错误处理**：确保在加载媒体资源时添加适当的错误处理代码，以便在遇到此类错误时给出有用的反馈或备选方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值