video标签 设置autoplay无效

已于 2022-09-07 14:45:16 修改
阅读量540 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端
于 2022-09-07 14:44:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changyana/article/details/126745530
版权
博客讲述了在谷歌浏览器和火狐浏览器中，由于安全和用户体验考虑，不支持非静音视频自动播放。作者通过设置autoplay和mute属性，解决了视频无法自动播放的问题，揭示了现代浏览器对于自动播放政策的调整对开发者的影响。
摘要由CSDN通过智能技术生成

想要一进页面就加载视频，明明设置了autoplay: true，
在这里插入图片描述
但是一进页面还是自动暂停的，需要自己点击播放按钮才可以。
在这里插入图片描述

这就很莫名其妙，最后自己查了一下，发现还要多设置一个静音才可以实现自动播放。
现在谷歌浏览器和火狐浏览器都不支持非静音自动播放了
在这里插入图片描述
很神奇，竟然可以了。
在这里插入图片描述

ChangYan.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html学习笔记-video/audio下autoplay设置无效
蜗牛背着那重重的壳呀，一步一步地往上爬.......
04-14 2224
刚学习到video标签的时候，学习到它有个属性是autoplay，设置这个属性的时候可以自动播放音频。 <audio src="/1080p.mov" controls="controls" autoplay="autoplay" loop="loop" preload="preload">您的浏览器无法播放音频文件</audio> <!--controls 属性表示...
移动端 video 的autoplay不起作用的解决方案
wuyajun1124的专栏
11-30 1万+
由于移动端的限制导致video标签的autoplay无法正常工作，解决办法如下： //创建一个video标签 var __video = $(""). css({'position':'absolute','left':'-500px','right':'-500px','width':'10px',height:'10px'}).appendTo('body'); //设置视频文件地址
前端使用 video标签 设置 autoplay 无法自动播放
weixin_43940592的博客
03-29 1173
如果你使用video标签又设置 autoplay 属性 还是无法播放 尝试在标签上添加 muted属性 function App () { return ( <> <ReactPlayer url={url} playing={true} muted={true} /> </> ) } 我的问题就被解决了 https://www.theverge.com/2018/3/22/17150870/google-chrome-autopla
h5的video标签中的autoplay属性在Google浏览器中不生效
Agnesyuan的博客
09-12 4484
在学习video标签时发现autoplay属性在Google浏览器中不能自动播放视频，但是我用火狐浏览器打开却可以正常自动播放。在网上搜了一下解决方案，基本都是说在video标签里增加muted属性就能行，试了一下果然可以自动播放了。我又去搜了一下muted属性的介绍，W3School上是这么介绍的 这么看来muted是用来对视频静音播放的，所以又会有新的问题，就是自动播放视频时没有声音，显...
video标签设置autoplay无效
最新发布
huang_hai_an的博客
04-13 432
在html页面使用video标签的时候，给它设置了autoplay属性，即 autoplay = “autoplay”，发现没有什么效果；解决方法是： 给video标签加上 muted 属性就可以自动播放了，静音的意思；原因是： 谷歌浏览器和火狐浏览器 不支持非静音自动播放。
H5 video 自动播放（autoplay）不生效解决方案
卡尔特斯
12-13 1万+
有个h5需要加入播放器，发现在微信浏览器中无法自动播放，在移动端普通浏览器中也无法正常自动播放ios浏览器中（微信或者其他浏览器），每次刷新进入网页首次需要手动点击播放，下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放，在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决，但是安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。
关于video设置autoplay属性无法自动播放问题
Admin_yws的博客
04-25 2381
问题代码： 原因分析及解决方案：浏览器限制有声音的视频自动播放，即使添加自动播放属性autoplay也不能直接播放；添加muted意为静音播放即可实现自动播放。 解决后代码如下：
video下autoplay属性无效的解决方法(添加muted属性)
12-28
背景：video下载入ogg格式视频，并设置自动播放属性autoplay，但是使用Chrome预览时，视屏画面已加载出来，但是无法自动播放，F5刷新后可以自动播放。使用火狐浏览器可以自动播放。最初代码如下： <video ...
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...
videojs 播放 hls 流视频 自动播放(autoplay + muted)
weixin_42448623的博客
09-02 1万+
1.它没有 之前 rtmp转流视频不能隐藏标签 和离开页面 会报错 这个不会 2.自动播放 无效解决 autoplay+autoplay 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo&lt...
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
m0_64642443的博客
06-14 1万+
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
解决 uniapp video controls=“false” 无效问题
前端程序猿的博客
04-18 944
【代码】解决 uniapp video controls=“false” 无效问题。
微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化
sinat_38683889的博客
11-15 5243
微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化 innerAudioContext是微信小程序自带的页面内播放器，可以通过 wx.createInnerAudioContext 接口获取实例。innerAudioContext 的用法如下： 首先获取播放器实例 const innerAudioContext = wx.createInne...
解决google浏览器自动播放问题
m0_53574149的博客
07-19 1388
解决google浏览器自动播放问题
解决video标签设置autoplay在浏览器还不能自动播放问题
dengpengquan的博客
10-08 4971
代码： <video id="video1" controls="controls" autoplay="autoplay" width="300" height="240" loop="loop" muted="true"> <source src="/1.mp4" type="video/ogg" /> <source src="/1.mp4" type...
PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）
Cool的博客
09-08 5975
最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配自动播放兼容，这些问题很是头疼；得到这个需求后，开始查看各个大厂的移动端网站，发现很少有官网在移动端使用视频当做背景； 正当手足无措时，无意中看到了滴滴的移动端官网，大家可以查看下图，这个我们看似是视频的背景，其实是由300多张图片组动态更换图片的src组成的；滴滴移动端网站(PC需要F12打开控制台 -> Ctrl + Shift + M 切换到移动端) 这时候会有同学问：为什么不直接放一.
flutter 图片转base64_如何使用Flutter实现多种布局方式，无限轮播，Android和IOS双端适配？
weixin_39806779的博客
11-30 381
前言大部分app都有轮播图，一般是展示一些新闻公告通知等图片，在flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配，github：flutter_swiper使用：加载图片一般是从本地代码中或者使用网络图片，那么，首先将资源添加到项目的 pubspec.yaml 文件中（更多细节请参阅Assets and images）：flutter: asse...
flutter 九宫格菜单_flutter实现轮播图效果
weixin_30444697的博客
12-30 316
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下1 添加依赖库flutter_swiper: ^1.0.62 普通常用 圆点指示器自动轮播图class SwiperViewDefaultPage extends StatefulWidget {@overrideState createState() {return new SwiperViewDefaultPa...
audio或video标签 autoplay无效 或 .play()报错问题 解决方案
热门推荐
苍老师背后的男人
11-02 3万+
video标签 video标签设置 autoplay 无效，一般的解决办法是 在video标签上设置 muted 属性 即可。 muted 属性是 静音的意思 也就是说，想让video标签自动播放视频，必须先设置为静音。原因下面一起说。 audio标签 audio标签设置 autoplay 无效，或者在 js 中用 audio.play() 报以下错误： 而且audio标签 即使设置了 muted 属性也不能自动播放（解决方法最后说）。 原因分析 其实从报错信息也可以了解到，DO..
video标签设置视频封面
08-12
视频标签可以通过添加poster属性来设置视频封面。例如，在video标签中加入poster属性，将其值设置为图片链接，即可将该图片作为视频的封面。具体代码如下： ```html <video src="video_url" poster="封面图片链接" controls="{{false}}" initial-time='0.01' muted autoplay object-fit="cover"></video> ``` 其中，video_url是视频的链接地址，封面图片链接是视频封面的图片地址。通过这样设置，视频在加载前会展示封面图片，提高用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信小程序：video标签默认显示视频的第一帧作为封面](https://blog.csdn.net/mouday/article/details/118517724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、...](https://blog.csdn.net/qq_46617584/article/details/129185121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值