video标签设置autoplay（自动播放）无效

最新推荐文章于 2024-08-25 08:53:59 发布
最新推荐文章于 2024-08-25 08:53:59 发布
阅读量2.8k 收藏 2
点赞数 4
分类专栏： JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brilliantst/article/details/121270910
版权

问题： 在使用video标签的时候，给它设置了autoplay属性，发现没有什么效果；

解决方式： 给video标签加上muted（静音）属性就可以自动播放了；

原因： 谷歌浏览器和火狐浏览器现在都不支持非静音自动播放了

凹凸曼打不赢小怪兽
关注
专栏目录
视频自动播放的实现与问题解决
仰望星空的代码
03-03 1228
一个布尔属性，如果为 true，那么当用户在当前页面和另一个页面或应用程序之间来回切换时，会自动切换画中画（picture-in-picture）模式。在发布代码之后，页面第一次加载时，视频可以正常播放，但是在页面刷新后，视频却不能正常播放了。通常，网站上展示的视频推荐采用 WebM 格式，其中使用 VP9 编解码器，以及 MP4 格式，采用 AVC（H.264）编解码器。muted：布尔属性，指明在视频中音频的默认设置。指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
video标签autoplay属性不生效
小白白的博客
04-12 1170
使用autoplay属性，要配合muted静音属性才生效
video标签设置autoplay之后不生效
weixin_42178670的博客
08-10 498
video标签设置autoplay之后不生效的解决方法 在video标签上加上muted属性即可
autoplay自动播放失败
最新发布
m0_68883025的博客
08-25 544
在html页面使用audio标签，给它设置了autoplay属性自动播放音频失败，发现写入的autoplay 没有效果；按照描述是因为chrome为了改善用户体验，最大限度降低网络上的数据消耗，或者减少对用户的骚扰,禁用了自动播放有声音频和视频。
html学习笔记-video/audio下autoplay设置无效
蜗牛背着那重重的壳呀，一步一步地往上爬.......
04-14 2287
刚学习到video标签的时候，学习到它有个属性是autoplay，设置这个属性的时候可以自动播放音频。 <audio src="/1080p.mov" controls="controls" autoplay="autoplay" loop="loop" preload="preload">您的浏览器无法播放音频文件</audio> <!--controls 属性表示...
video 标签无法自动播放
qq_44535402的博客
11-28 3243
video 标签无法自动播放
video autoplay失效
impossible1994727的博客
06-18 1488
测试的时候好好的，上到正式上面的时候video引用的视屏加载需要时间，自动播放就失效了 解决办法：在标签内写上muted <video class="s_videos" :poster="video.vedioPicBig" :src="video.vedioFilePath" id="videoPlay" ...
html安卓手机播放视频隐藏控件,video 经测试还不支持移动端自动播放的 vue-video-player也没办法...
weixin_33380613的博客
06-03 925
查了无数篇 归集下1. 说设置autoplay的 (x)2. 说使用vue-video-player(x)3. 说vue-video-player组件第一次总是不能自动播放的原因是，视频或音频的url赋值时必须使用this.playerOptions.src方法来进行切源，而不是this.playerOptions.sources[0].src。 (x)3. 说vue-video-player ...
html+vue video标签无法自动播放
微笑一刀的博客
06-25 1427
用html+vue的方式定义一个组件，组件中核心就是一个视频组件video,但是无法播放 所以记录一下 autoplay loop muted 这三个属性 都设置了就可以播放了，我猜测可能是声音有什么权限问题,浏览器可能要自动播放必须静音之类，当然只是猜测...
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...
video下autoplay属性无效的解决方法(添加muted属性)
12-28
背景：video下载入ogg格式视频，并设置自动播放属性autoplay，但是使用Chrome预览时，视屏画面已加载出来，但是无法自动播放，F5刷新后可以自动播放。使用火狐浏览器可以自动播放。最初代码如下： <video ...
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...
h5-video自动播放兼容性处理
hahahhahahahha123456的博客
03-15 2942
综上所述：pc端加muted基本浏览器都兼容 ios端加muted 除uc与QQ，微信，其余兼容 android端加 muted 基本浏览器都兼容
video 经测试还不支持移动端自动播放的 vue-video-player也没办法
xqb081010的博客
01-18 1万+
查了无数篇 归集下 1. 说设置autoplay的  (x) 2. 说使用vue-video-player(x) 3. 说vue-video-player组件第一次总是不能自动播放的原因是，视频或音频的url赋值时必须使用this.playerOptions.src方法来进行切源，而不是this.playerOptions.sources[0].src。 (x) 3. 说vue-video...
H5中短视频自动播放无法关闭？autoplay=“false“为什么不行，必须通过添加JavaScript控制代码才能实现吗？
Smile1552911411的博客
04-19 896
曾经被这个问题困扰过一阵子，不知道有没有小伙伴和我一样找了很久也没找到解决办法的。甚至加入了JS代码，也没有成功解决。这其实并没什么毛病，但是为什么视频还是会自动播放呢？其实是为我们位置添加的不对。H5中短视频自动播放无法关闭？autoplay="false"为什么不行？如果想关闭嵌入代码的自动播放，只需要在 src。H5中添加嵌入代码，通常我们都能想到需要添加。不过今天灵光乍现，我解决了。
解决video.js video-player不能自动播放问题
weixin_43856626的博客
10-19 6032
把autoplay,muted都设置为true，如下： autoplay: true, //如果true,浏览器准备好时开始回放。 muted: true, // 默认情况下将会消除任何音频。
＜video＞标签在vue中动态绑定地址不能自动播放的问题
qq_35368296的博客
07-23 6660
背景：记录下后端程序员在做企业门户时，标签在vue中使用遇到的问题。门户主要做一些炫酷界面，用视频标签展示展示一些mp4等格式的视频。 问题：动态绑定的地址视频不能自动播放 解决方案： <video preload="auto" controls="controls" muted loop style="width:500px;height: 500px;" ref="videoId"> <source :src="addressUrl" type="video/mp4">
Video在网页和移动端无法自动播放问题？?
zhouzuoluo的博客
04-16 1万+
<video>标签介绍 <video> 标签定义视频，比如电影片段或其他视频流。支持三种视频格式：MP4、WebM、Ogg。是H5的新标签，使用如下： //autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放 <video width="320" height="240" autoplay="autoplay" con...
Vue-vedio实现自定义自动播放
eqizhihui的博客
08-24 1469
一般情况下，vedio标签自动播放只需要添加autoplay属性即可，添加autoplay属性的vedio，视频在就绪后就马上播放。最终想法：动态控制control，点击按钮后直接使用play()方法让vedio播放。需求描述：添加一个播放按钮，在点击按钮后按钮消失，视频自动播放。测试结果：点击后按钮消息，但视频没有自动播放。初步想法：动态控制autoplay属性。
video标签完全显示 自动播放
08-12
要实现video标签完全显示并自动播放，你可以按照以下步骤进行操作： 1. 使用CSS样式来设置video标签的尺寸和位置，确保它完全显示在页面上。例如，你可以设置video标签的宽度和高度为100%，并使用position属性将其定位在页面中心。 ```css video { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } ``` 2. 为video标签添加autoplay属性，以便在页面加载时自动播放视频。 ```html <video autoplay> <source src="your-video-file.mp4" type="video/mp4"> </video> ``` 请确保你将`your-video-file.mp4`替换为你实际要使用的视频文件的路径。 这样配置后，视频将会完全显示并自动播放。请注意，某些浏览器可能会阻止自动播放功能，因此在某些情况下，视频可能需要用户手动启动。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值