var promise = document.querySelector('video').play() if (promise !== undefined) { promise.then(() => { // 支持自动播放且有声音 }).catch(error => { // 不支持自动播放且有声音,这个时候可以在视频上面显示一个播放图标,提示用户自己点击播放 }) }
但不是所有的浏览器的 video.play() 都支持返回 promise。想了解更多,可以到这个网站看看。
https://developer.mozilla.org...
02全屏问题
废话不说,先贴代码。
// 检测是否全屏(IOS 端无效) function checkFullScreen() { var isFull = document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement if (isFull == null || isFull == undefined) { isFull = false } return isFull } // 全屏 function toggleFullScreen() { var videoBox = document.querySelector('.video-box') // video 是video-player 里面的 video 标签,这个用于 ios 端全屏 var video = document.querySelector('.video-box video') var isFull = checkFullScreen() //W3C if (videoBox.requestFullscreen) { isFull ? document.exitFullscreen() : videoBox.requestFullscreen() } //FireFox else if (videoBox.mozRequestFullScreen) { isFull ? document.mozCancelFullScreen() : videoBox.mo