Vue3移动端web页面video标签使用及适配（点击或自动播放） |
您所在的位置：网站首页 › 手机怎么设置自动播放视频 › Vue3移动端web页面video标签使用及适配（点击或自动播放） |
Vue3移动端web页面video标签使用及适配（点击或自动播放）
|
一、视频自动播放 这个方法实践后发现在iphone端的浏览器（微信、百度、safari、谷歌上都能实现进入页面后视频自动播放） 但是在安卓手机上的微信无法自动播放（所以我第二版用的gif，但是gif比视频体积大太多，如果进行压缩的话也会很影响画质，最终还是放弃了这种方法） // 这句加在vue项目的index.html文件中(微信的自动播放生效) onMounted(() => { nextTick(() => { const video = document.getElementById('video') // 一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 video.play() // 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener('WeixinJSBridgeReady', () => { video.play() },false) }) })二、视频点击播放（可以先拿视频第一帧的照片放上去，点击图片后换成视频） 不直接放视频的原因，如果视频和头部导航栏共处一个div内的话，视频的层级会非常高，会盖住导航栏 // 图片 // 视频 // 目前是图片还是视频 const ifImg = ref(true) const playClick = (() => { nextTick(() => { ifImg.value = false const video = document.getElementById('video') video.play(); }) }) onMounted(() => { nextTick(() => { const video = document.getElementById('video') // 监听用户点击屏幕（点击屏幕后即可播放视频） document.addEventListener('touchstart', function(e){ console.log(e.target.className); // 点击图片或者视频， 视频播放 if (['home-imgback', 'head-video'].includes(e.target.className)) { ifImg.value = false video.play(); } }, false) }) }) // 这种方法除了百度之外，其他视频都会放大（目前用的这个方法） // 这种方式全部浏览器都固定不放大视频放大图片示例（视频播放不在原本位置）：
|
【本文地址】
今日新闻 |
推荐新闻 |