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

最新推荐文章于 2024-07-12 16:06:10 发布

_木小夕_

最新推荐文章于 2024-07-12 16:06:10 发布

阅读量593

点赞数

文章标签：音视频 javascript vue3 ts

本文链接：https://blog.csdn.net/bo_gu/article/details/130527564

版权

这次的需求是做一个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 ()
	//其他操作
}