上个星期使用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>
当视频上下或者左右有黑边时,需要设置object-fit="fill"这个属性,具体含义可去官网查看
https://uniapp.dcloud.io/component/video?id=video