移动端嵌入webview播放视频

7 阅读1分钟
  • iOS播放问题: 播放时会自动全屏:video标签设置playsinline

不自动播放:因为iOS自动播放只支持静音自动播放.所以先设置muted为true.当加载完成之后隔小段时间再将mute设置为false.(Android的默认不静音,所以需要区分一下)

    video = document.getElementById('remoteVideo');
        // 视频可以播放时隐藏加载动画
        video.addEventListener('canplay', () => {
            setTimeout(()=>{
                video.muted = false
            },1000)
        });
        if (isIos) {
            video.muted = true
        } else {
            video.muted = false
        }
   }
        // 设备区分
function isIos() {
        const userAgent = navigator.userAgent.toLowerCase();
        if (/android/.test(userAgent)) {
            return false
        } else if (/iphone|ipad|ipod/.test(userAgent)) {
            return true
        }
        return false
    }
  • 如果Android不想要默认的灰色播放按钮,按照上面设置一个poster图片