ios H5无法自动播放视频 vue3 TS

这次的需求是做一个h5 到某个页面的时候需要自动播放一个视频 安卓特别OK ios又搞幺蛾子,
不管是设置autoplay还是在js里面调用play()都不行,必须是用户触发了点击事件才能play()
autoplay的话除非把muted 静音打开 ,
但是又不符合需求了 、、、
于是想到搞个骚操作,在用户点击其他按钮的时候 偷偷播放一下下视频 之后再正常play()就没问题了

    <button @click='start'>示例按钮</button>
    <video class="myimg" src="/1.mp4" loop="true" poster="/fail/center.png" preload="auto" playsinline
          ref="videoRef">
    </video>

对了vue3获取dom也顺便记录一下 会了的就当复习了
dom名字取和ref一样的,
但是不知道为什么每次用的时候都需要判断一下.value是否存在 不然就报错 求各位大神指点

const videoRef = ref<null | HTMLAudioElement>(null)
//偷偷播放一下视频
const playVideo = () => {
    console.log('针对ios兼容,偷偷播放一下视频');
    if (videoRef.value) {
        videoRef.value.play()
        setTimeout(() => {
            if (videoRef.value) {
                videoRef.value.pause()

            }
        }, 100);
    }
}
//点击了按钮
const start = () =>{
	playVideo ()
	//其他操作
}

大概就是这样啦~

你可能感兴趣的:(音视频,javascript,vue3,ts)