vue, H5 浏览器 播放器video 嵌入APP(andriod，IOS) 首次有声音自动播放 处理

已于 2022-04-26 15:04:10 修改
阅读量2.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue js ios android 视频播放器
于 2020-07-06 18:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdjfjgfdgdfg/article/details/107164600
版权

浏览器播放器首次有声音播放

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

方法一：

可以设置自动播放autopaly，muted静音播放，首次播放有效。如果不是静音无效。

方法二：H5访问数据结束后通知app，app再调用H5的函数触发click事件播放视频，不需要静音就可以首次自动播放视频。（移动端浏览器支持有声音自动播放，APP内嵌H5支持有声音自动播放。）

西瓜播放器，设置autoplay: true

Vue

1. 在界面设置一个标签，用于触发click事件。标签内不设置任何文本。类似一个隐藏效果。设置@click, v-trigger , v-if

toggle为自定义的方法，showTarget是在vue的data中声明的boolean类型变量

2.

最低0.47元/天 解锁文章
jdjfjgfdgdfg
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目接入海康威视H5player，看完这篇彻底明白了
m0_61068009的博客
04-02 1189
)},init() {// 设置播放容器的宽高并监听窗口大小变化})},//因为项目配置在二级域名，所以文件需改变路径else{oStyle: {})// 事件回调绑定windowEventSelect: function (iWndIndex) { //插件选中窗口回调},pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调},
WebView加载H5视频的问题总结
Lcy_for_Android的博客
05-22 864
1.全屏显示 2.自动播放 布局省略, 页面就一个WebView控件 private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.lay...
关于音频在谷歌浏览器无法自动播放问题
weixin_41926354的博客
04-09 2254
关于音频在谷歌浏览器无法自动播放问题 音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD 解决： 第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy 第二步，在Autoplay policy中将Default改为No user gestur
vue项目h5的音视频播放ios安卓适配
weixin_60885570的博客
09-28 297
vue项目中我只引入了原生的audio标签使用了play()方法,ios端不能自动播放。img是音乐图片和关闭音乐图片,mounted对音乐做监听处理。data中放入:isopenimg: true, // 音乐。audio便签src里面的是音频链接。
微信浏览器（公众号小程序），h5端，小程序 ，app端 解决video视频自动触发播放问题，
qq_69892545的博客
08-12 3235
最近一直在开发h5端 和公众号小程序，一般总会遇到video不能自动触发播放（由于不同浏览器限制）、不加延时器时器没有效果得，这样在微信公众号在微信浏览器中会实现自动播放。h5端 ，微信小程序 实现自动播放是可以采用获取视频上下文实现得，2.在onload和change方法中执行：调用。
html5 移动端 Android和iOS手机 video自动播放
S筱潇S四维Smile
03-09 1261
<video webkit-playsinline playsinline x5-playsinline="" x-webkit-airplay="allow"id="video" controls="controls" src="xxx.mp4" autoplay="autoplay"></video> 1 、iOS方法： 引入jweixin-1.6.0.js <script src="http://res.wx.qq.com/open/js/jweixin-1..
APP端webview自动播放视频
Bug管理员
12-15 1万+
昨天碰到一需求，需要写一个html5页面，要求支持打开自动播放视频。 ok，要支持自动播放，设置的autoplay="autoplay"就可以了吧。 测试发现只有在浏览器中是正常播放了，android和ios都没有播放。 换了种写法： function playVideo(){ var video = document.getElementById("alt-player-ios");
vue实现自定义H5视频播放器的方法步骤
12-01
前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑… 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. ...
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
01-18
一、vue中解决chrome浏览器自动播放音频 需求 有新订单的时候，页面自动语音提示和弹出提示框； 问题 chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
Video自动播放兼容PC端，移动端，最佳方案（IOS、安卓、微信端）
web_ding的博客
01-14 1587
需求： 需要在app内嵌中添加背景动态播放，发现pc可以正常播放，放在移动端，部分浏览器会出现各种问题（抓狂ing）； _______________________________________________________________________________________________________ 移动端video的局限： iOS下不能自动播放，需要至少touch一次屏幕，这个有时候还挺烦人的，例如我们想做一个H5 app闪屏的时候就蛋疼了。 不能在中间穿插棒棒的交互效
Web视频video自动播放(移动端及PC端)
u010735316的博客
06-02 1万+
video自动播放；移动端禁止全屏播放
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方法调用失败，因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】 用户再跟网页有了交互后，该报错不会再出现 如果必须再网页加载完就播放音频，详情请看 ...
vue2录音插件可实时监控音量大小（H5和PC端都可使用）
前端程序猿的博客
03-07 1557
直接上源码。
Vue中实现视频播放——vue-video-player、dplayer
m0_46318298的博客
08-11 2万+
2、一些常见的函数和参数使用，完整代码如下。一、vue-video-player。
html 中返回上一步页面,（移动端）在APP中嵌入H5网页，返回上一步&返回APP菜单首页...
weixin_35870524的博客
06-03 2632
H5页面中：返回上一步固定写法(前端实现：使用vue框架的返回上一步语法即可)：methods:{backforward(){this.$router.back(-1); // 返回上一步},H5页面中：返回APP个人菜单首页写法(前端无法返回，需调用APP负责人那边写的返回函数)// 核心思想：判断手机是android还是ios系统，然后调用htmlBack方法返回(该方法是APP负责人写的返回...
微信h5页面自动播放音乐
hellosnowyy
01-31 2225
此方案ios微信内h5不会播放，其他正常。此方案安卓微信内h5不会播放，其他正常。https + audio标签。方案一 + 方案二`
vue3开发移动端H5页面中video无交互自动播放完美解决方案
最新发布
你好！刘斩仙
01-17 1390
移动端测试视频正常播放无需交互，亲测有效！，声音未测试，本次需求无需声音。几乎所有转化默认都是MPEG-2，一定要确认！如果黑屏就是格式不对，如果跨越就设置下。
videojs vue 静态source_手把手从零开始封装一个vue移动端视频播放器组件ios播放视频时自动全屏如何取消
05-20
在 Video.js 中取消 iOS 播放器自动全屏，可以使用 `playsinline` 属性。该属性告诉 iOS 在原生的 Safari 浏览器中播放视频时不要自动全屏。 在 Vue 组件中，你可以将 `playsinline` 传递给 `video-js` 组件的 `options` 属性，如下所示： ```vue <template> <div> <video-js ref="videoPlayer" class="vjs-custom-skin" :options="playerOptions" /> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default { name: 'VideoPlayer', props: { source: { type: String, required: true, }, }, data() { return { player: null, playerOptions: { autoplay: false, sources: [{ src: this.source, type: 'video/mp4', }], controls: true, fluid: true, playsinline: true, // 取消 iOS 自动全屏 }, }; }, mounted() { this.initPlayer(); }, beforeDestroy() { if (this.player) { this.player.dispose(); } }, methods: { initPlayer() { this.player = videojs(this.$refs.videoPlayer, this.playerOptions, function onPlayerReady() { console.log('Player is ready'); }); }, }, }; </script> ``` 在上面的示例中，我们将 `playsinline` 设置为 `true`，以便在 iOS 上播放时取消自动全屏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值