Chrome浏览器中使用js来播放video标签内容

最新推荐文章于 2023-06-14 18:22:37 发布
最新推荐文章于 2023-06-14 18:22:37 发布
阅读量1.4k 收藏
点赞数
原文链接：http://www.cnblogs.com/Richard-Tang/p/10077155.html
版权

问题描述

在Chrome浏览器中使用 <video>标签 并通过JS的方式来实现鼠标浮动上去后播放视频的效果，但是在浏览器的控制台上会提示以下的错误！

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

 鼠标浮动到视频上后自动播放视频

解决办法

在video标签上添加 muted 属性，即可解决这个问题！

 

转载于:https://www.cnblogs.com/Richard-Tang/p/10077155.html

weixin_30376083
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 chrome rtmp,Video.js 5.x 处理rtmp视频流
weixin_39796363的博客
06-15 944
Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。浏览器端，HTML5 video标签无法播放 RT...
Chrome 使用video.js 无法播放Hls 直播源的视频
weixin_42758129的博客
12-22 6070
##Chrome 使用video.js 无法播放Hls 直播源的视频 首先：下载video.js 下载地址：http://www.jq22.com/jquery-info404 打开index.html文件 官方demo中 MP4格式的能够播放 但是改成CCTV1 的Hls直播源时 却没有不能够加载视频，郁闷ing~~ Hls是基于H5的视频播放（Ps:如果不支持H5就使用提醒Flash播放）...
谷歌html5.js,HTML5 video (video.js) not loading in Chrome
weixin_28866737的博客
06-07 215
I have a html5 video video that is not loading in chrome, it just shows the loading spinner from video.js.I get the following error in chrome console too:Uncaught TypeError: Cannot call method 'init' ...
谷歌浏览器怎么改html5,关于谷歌浏览器不支持html5中audio的autoplay解决方法（js代码解决）...
weixin_42510026的博客
07-01 285
当我们直接写autoplay时，在chrome中浏览器并没有自动播放音频；如果直接通过js来调用audio的play()方法也不行；控制台还会报错大概意思：play()调用失败，因为用户没有与文档进行交互经过网上的查找：原博客：https://blog.csdn.net/baiding1123/article/details/104945759谷歌为优化用户体验关闭了audio中的autoplay...
video, audio无法自动播放--Chrome视频音频自动播放策略
Lidppp的博客
09-10 1216
背景 前段时间出于兴趣写了一个弹幕播放器, 在写的过程中想做一个自动播放的功能, 但是遇到了Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.这个报错, 就很痛苦. 于是我开始去查为什么这样, 并且这个问题伴随了我大概有1年的时间吧, 今天突然想起来这个问题, 于是有了本博客. 官方对应介绍自动播放策略的博客 探索过程 最开始注意到这个问题后就去
HTML5的video标签的浏览器兼容性增强方案分享
09-28
对于不支持`<video>`标签的浏览器，可以使用JavaScript检测并插入Flash播放器作为备选方案。这种方式通常被称为“渐进增强”或者“优雅降级”，确保即使在旧的浏览器环境下也能提供视频内容。 通过以上步骤，我们...
JavaScript 如何在浏览器中使用摄像头
01-18
1.获得摄像头权限（本文使用chrome） 首先确保你运行以下js所在的url是https协议的或者localhost的： const constrains = { video: true, audio: true } navigator.mediaDevices.getUserMedia(constrains) ....
使用videojs/aliplayer 实现rtmp流的直播播放
04-21
本篇文章将详细探讨如何使用videojs和aliplayer这两款强大的JavaScript库来实现RTMP流的直播播放。 首先，让我们了解videojs。Video.js是一个开源的HTML5和Flash视频播放器，提供了丰富的自定义选项和插件，使得...
【JavaScript源代码】JavaScript 如何在浏览器中使用摄像头.docx
12-29
### JavaScript在浏览器中使用摄像头的方法 #### 一、获取摄像头权限 在开发Web应用程序时，如果需要使用到用户的摄像头或麦克风，首先需要通过`navigator.mediaDevices.getUserMedia()`方法请求相应的权限。为了...
FLV格式的浏览器播放插件
06-27
为了在不支持FLV的浏览器，如Chrome、Firefox和Edge中实现FLV视频的播放，开发人员通常会利用特定的浏览器插件或JavaScript库来解决这一问题。 "FLV格式的浏览器播放插件"是这样一种解决方案，它旨在让FLV视频能在...
解决Chrome浏览器无法自动播放音频视频的问题，Uncaught(in promise) DOMException
cocos2dGirl的专栏
02-18 1165
转载自：http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。 ...
chrome浏览器使用音视频SDK不能自动播放
Qianliwind的博客
09-13 337
最近在使用好视通的PaaSSDK开发web端应用时碰到音视频不能自动播放的问题，特记录如下 原因 新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频，即如果用户没有和页面产生交互，是不能自动播放音视频的，尤其是声音是不能出现自动播放的，他们认为会吓到用户。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放声音。 <video autoplay></video&.
在Chrome开发者工具中编写js并运行
qq_34302201的博客
11-19 2028
在Chrome开发者工具中编写js并运行 前言 今天记录一个小技巧，主要是在chrome开发工具中边编写js，边运行，学习效率大大提高~~ 通常情况下，我们在网上学习或者找一些轮子的时候，经常要在本地创建一个临时的html,js文件，再把js引入相应的html文件中，用浏览器打开相应的html文件，改个js代码都要重新刷新一遍，想一想都很麻烦懒得动，久而久之，我就变成了看看党，光看不练习，效率低到不行。。。。 今天我在网上看一些大牛写的文档的时候，有很多很基础的东西，虽然看一眼就会的那种，但是想一想还是自
ios js修改html的video,VideoJS+HTML5 2.3 + 和 IOS 4 +的自动播放失败_html5_开发99编程知识库...
weixin_29614791的博客
06-10 177
我的VideoJS和HTML5项目面向最新的网络浏览器( 。Firefox 和 Chrome的更新版本) 以及移动浏览器的( android2.3+和 IOS4+ ) 。我希望所有视频在"就绪"播放后自动播放。 我试图这样做( 在方法 below 中提到)，但注意到自动播放只在 Firefox 和 Chrome --中真正工作，意味着移动浏览器。我还没有在他们的本机仿真器中调试移动浏览器，因为我想...
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
最新发布
m0_64642443的博客
06-14 1万+
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
前端学习之音视频及其谷歌浏览器无法自动播放的解决方法（3）
狗头苏丹的博客
05-29 2189
音视频无法自动播放的问题解决方法
video.js 播放hls直播视频（.m3u8）谷歌正常播放示例（亲测有效附示例代码）
zcc的博客
12-21 5872
var myvideo = videojs(videoWin.id, { autoplay: true, + muted: true, preload: "auto", sources: [{ ...
video 标签 监听播放、暂停、结束等事件
c_qianxia5040的博客
01-30 1万+
<video id="video" controls="controls"> <source type="video/mp4" src="xxx.mp4"> </video> 获取视频总时长 var elevideo = document.getElementById("video"); elevideo.addEventListener('loadedmetadata', function () { //加载数据 //视频的总长度
video.js播放视频
qq_42640067的博客
01-12 5279
video.js播放视频1、常用播放器2、Video.js播放m3u8格式视频3、总结 1、常用播放器 视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。 flash播放器 缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。 H5播放器 基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第
js实现一个video标签播放不同的视频
qq_45268602的博客
03-28 4154
在学习html的时候，我们知道，使用video元素提供了播放、暂停和音量控件来控制视频，这里就不展开讨论。 我们今天主要了解的是，如何使用js来实现一个video元素播放不同的视频。话不多说，看代码： <body> <video id="myvideo" width="300" height="auto" controls="controls" muted="m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值