使用HTML5的video标签时报错

最新推荐文章于 2024-11-28 14:17:36 发布
转载 最新推荐文章于 2024-11-28 14:17:36 发布 · 3.4k 阅读 · 1

本文解决了Chrome浏览器中由于用户未与页面交互而导致<video>标签播放失败的问题。通过在<video>标签中添加muted属性实现静音播放。

【错误内容】DOM Exception: play() failed because the user didn't interact with the document first.

【原因】Chrome 66为了避免标签产生随机噪音而报错。

【解决】在<video>标签中添加muted属性，静音即可。

<video muted></video>

（转载自https://www.imooc.com/qadetail/258884?t=418313）

 

html5页面中使用videojs播放rtmp视频流（VUE）
胖敏博客
12-16 4463
方法很简单，这里就简写了 在Vue 项目中 安装 npm install vue-video-player --save 安装 npm install videojs-flash --save 在Vue项目 main.js 中引入 import VueVideoPlayer from ‘vue-video-player’ Vue.user(VueVideoPlayer) 在 V...
html5_videoplayer:一个3-4年的代码，如有错误请见谅
06-21
html5_videoplayer 一个 3-4 年旧的代码，请原谅任何错误。
html刷新页面出现412,html5-video – 如何修复412(前置条件失败)错误HTML5视频标记
weixin_39742568的博客
06-04 555
我得到了一个临时解决方案,帮助我使其工作.这是我的代码,其中我将毫秒数附加到文件源URL并重新加载相同的视频文件(如果发生任何错误).media.addEventListener('error', function (e) {var date = new Date();var milliSecs = date.getMilliseconds();var curr_src = $(media[0])...
error.html mp4,HTML Video error用法及代码示例
weixin_34217656的博客
06-10 1329
DOM Video错误属性用于返回MediaError对象，MediaError对象包含Video的错误状态。用法:video.error.code返回类型：此属性返回一个数字，代表视频的错误状态：1 = MEDIA_ERR_ABORTED-用户中止获取过程2 = MEDIA_ERR_NETWORK-下载时发生错误3 = MEDIA_ERR_DECODE-解码时发生错误4 = MEDIA_ERR_...
html5 video
lanqingmage的专栏
11-27 964
一、标签解读二、Media对象方法和属性三、Media JS事件四、浏览器对音视频格式支持说明五、疑难杂症　　1、mp4格式视频无法在chrome中播放　　2、让服务器能正确识别多媒体的MIME类型　　3、文件格式转换的问题　　4、能否在MP4完整下载前进行播放？　　5、避免用JS访问废除的属性　　6、Firefox 11 以上版本的音量控制的问题　　7、音视频播放是否完全脱离插件？　　8、如何全
网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法
逐浪CMS发哥的博客
01-26 1978
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsXOhdoY-1611632333201)(/UploadFiles/Anony/content/md/elbkemM3wu.jpg “在这里插入图片描述”)] 话说发哥四年前写了一个网页，如上图效果，实际网址http://pano.z01.com ，话说做好时是正常的，突然某一天，客户说你这个网站动画不见了，这是什么原因？ 结果检查脚本一切正常。 其实也不是动画完全消失，关键是要用鼠标点击一下，才可以播放，否则autopla
vue2使用EasyPlayer时报错videojs is not defined
最新发布
01-24
在Vue2项目中使用EasyPlayer.js时遇到`videojs is not defined`错误的原因可能是由于Video.js库未正确加载或者其加载顺序有问题。下面是一些解决此问题的步骤： ### 1. 确认依赖安装 首先确认是否已经通过npm 或 ...
新闻时报资讯类网站模板(带手机端).rar
05-09
【新闻时报资讯类网站模板(带手机端).rar】是一个基于HTML5技术的网站模板，专为构建新闻和时报类的在线平台设计。这个模板包含了响应式布局，使其能够适应不同设备的屏幕尺寸，包括手机端，从而确保用户在桌面电脑...
克隆《纽约时报》网站：HTML和CSS的实践项目
在HTML中，可以通过`<img>`, `<audio>`, `<video>`等标签来嵌入这些内容，并通过CSS调整它们的样式和布局。 ### 在线资源与灵感来源 在进行网页设计与开发时，开发者会参考一些在线资源获取灵感和知识，例如w3...
克隆《纽约时报》文章页面的CSS定位与浮动项目
1. HTML5是最新版本的超文本标记语言，引入了许多新特性，比如语义化的标签（article, section, nav, aside等）、表单元素的增强、新的图形和多媒体元素（canvas, video, audio等）、以及用于本地存储的Web存储API等...
play() failed because the user didn‘t interact with the document优化媒体不能自动播放
wzp20092009的博客
09-14 3万+
谷歌浏览器 video 元素设置 autoplay，我们原意是希望页面加载时自动播放，但实际上并没有自动播放，在控制台报错如下： Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 这里的意思是，是因为用户没有先和网页交互所以播放失败。
自动播放音频 audioDom.play() 报错 - play() failed because the user didn‘t interact with the document first.
工作中遇到问题记录
01-31 7068
`audioDom.play()` 自动播放音频时报错：`Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.`
报错 play() failed because the user didn‘t interact with the document first
热门推荐
qq_45976132的博客
05-18 4万+
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD 报这个错是因为 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放 在我项目中的原因是因为我把播放声音的按钮设置为t
play() failed because the user didn't interact with the document first
wed2100304的专栏
11-18 3万+
vue使用js调用音频文件报错，错误信息如下： play() failed because the user didn't interact with the document first 翻译：play方法调用失败，因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】 用户再跟网页有了交互后，该报错不会再出现 如果必须再网页加载完就播放音频，详情请看 ...
EasyPlayer.js关于报错play() failed because the user didn‘t interact with the document first的问题
EasyNTS的博客
11-28 1万+
其中，EasyPlayer.js作为一款功能强大的H5播放器，凭借其全面的协议支持、多种解码方式以及跨平台兼容性，赢得了广泛的关注和应用。EasyPlayer播放器属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，无须安装任何插件，起播快、延迟低、兼容性强，使用非常便捷。用户希望打开页面的时候就直接自动播放带音频视频（单屏或者多屏），但是浏览器的自动播放策略是，必须是用户手动触发了事件之后，才能自动播放。静音状态下播放，添加一个交互事件，让用户手动触发下，再去播放视频。
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
sjslln的博客
09-04 2万+
audio.html:43 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
浏览器自动播放音频时的错误拦截（Uncaught (in promise) NotAllowedError: play() ...... https://goo.gl/xX8pDD）
qq_45599738的博客
11-19 4250
对浏览器自动播放音频拦截的处理 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
h5的video标签的用法及问题
wjw0125的博客
10-22 3175
关于HTML5视频标签的问题 一、基本 video标签在兼容性上还是比较差的，如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。但是由于H5在移动设备上展现，基本都是使用webkit内核，只需要考虑Android、IOS设备上的差异。 浏览器不支持/正在加载中 (指定的视频都不能播放时，返回的内容) video标签有src、poster
video自动播放功能，却遭遇google浏览器拦截：play() failed because the user didn‘t interact with the document first
zwf193071的专栏
04-15 3360
前言 项目需求：希望宣传页上，循环播放视频动画效果，设计师提供了一个mp4给我，可是当我将其放在首页后，却遇到如下错误： play() failed because the user didn't interact with the document first 视频播放代码为： <video src="~examples/assets/images/banner.mp4" autoplay="autoplay" loop="loop" id="video"></video> 解决
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值