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

最新推荐文章于 2025-05-05 14:52:43 发布

爱吃一块五花肉

最新推荐文章于 2025-05-05 14:52:43 发布

阅读量2.5w

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/yyanglirong/article/details/107149890

版权

上个星期使用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 ((<any>document).attachEvent) {
                (<any>document).attachEvent("WeixinJSBridgeReady", function () {
                    voice.play();
                    voice.muted = false;
                });
                (<any>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” 进度条才不显示

<video
          id="myVideo"
          ref="video"
          :src="videos"
          muted
          autoplay
          x5-playsinline
          playsinline
          webkit-playsinline
          :controls="false"
          duration="15"
          object-fit="fill"
        ></video>