uniapp之使用巨坑视频自动播放问题，IOS安卓兼容问题

2024-07-06 05:06| 来源: 网络整理| 查看: 265

上个星期使用uniapp在欢迎页插入了一段视频，要求进入页面就开始播放视频，7s后自动跳转，其实这里也不算是一个跳转，welcome是组件，然后是lottery页面，只是在7s后给welcome组件的v-if设置成了false。碰到的问题如下： 1.视频自动播放属性无效； 2.部分华为手机需点击一下才能进入播放，然后会自动进入全屏模式开始播放视频。 3.welcome页面v-if设置为false之后，页面上竟然还存在video元素，在lottery页面点击一下，部分手机偶尔，iphone6p每次都会在播放一遍视频的音频，但是视频没有显现。

一、视频自动播放问题

首先看了uniapp官网上的video组件属性说明在这里插入图片描述虽然上面写了sutoplay属性可以设置是否自动播放，但根据我的验证，发现该属性在移动端上无效，然后看了同事的代码，进行了如下修改，对兼容性进行处理后，市面上大部分机型可以自动播放，但是华为一小部分机型还是不可以。这里WeixinJSBridge 可能需要全局注册一下，不然会报错。

export class videoActive { public constructor() { let voice : any = document.querySelector("video"); console.log("video") voice.play() if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { voice.play(); voice.muted = false; } else { //監聽客户端抛出事件"WeixinJSBridgeReady" if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", function () { voice.play(); voice.muted = false; }, false); } else if ((document).attachEvent) { (document).attachEvent("WeixinJSBridgeReady", function () { voice.play(); voice.muted = false; }); (document).attachEvent("onWeixinJSBridgeReady", function () { voice.play(); voice.muted = false; }); } } //voiceStatu用來記録狀態,使 touchstart 事件只能觸發一次有效,避免與 click 事件衝突 var voiceStatu = true; voice.addEventListener('ended', function () { console.log("完了"); }, false); } }

这里用的ts语法，然后在需要用的页面进行声明注册

import { videoActive } from "../ts/videoActive"; mounted() { new videoActive();//使用 this.handleCountDown(); } 二、部分华为手机需点击一下才能进入播放，然后会自动进入全屏模式开始播放视频。

这个出现的问题也是很匪夷所思，进入全屏页后，7s之后页面其实进行了跳转，但是，全屏模式仍然显示，被置于顶层。并且，若没有设置时间跳转，在全屏模式下，视频播放完后，就会自动进入一个广告页，目前，这个地方还没解决，这个星期解决后在上解决办法。目前思路如下：上面我们不是监听到了视频播放结束的事件，addEventListener，打算在里面直接跳转，替换当前地址，不过需要拿到参数才可以

uniapp视频播放移动端h5页面禁止下方进度条展示

在这里插入图片描述官方这些属性都不生效，也是服了需要设置:controls=“false” 进度条才不显示

当视频上下或者左右有黑边时，需要设置object-fit="fill"这个属性，具体含义可去官网查看 https://uniapp.dcloud.io/component/video?id=video

【本文地址】

公司简介

联系我们

uniapp之使用巨坑 视频自动播放问题，IOS安卓兼容问题

uniapp之使用巨坑视频自动播放问题，IOS安卓兼容问题