JavaScript可以通过使用全屏API来实现切换HTML5视频的全屏和非全屏模式。下面是一个示例代码:
// 获取视频元素
var video = document.getElementById('myVideo');
// 切换到全屏模式
function enterFullscreen() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
}
// 退出全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 监听全屏状态改变事件
document.addEventListener('fullscreenchange', function(event) {
if (document.fullscreenElement) {
// 进入全屏
console.log('进入全屏');
} else {
// 退出全屏
console.log('退出全屏');
}
});
// 切换全屏/非全屏
function toggleFullscreen() {
if (document.fullscreenElement) {
exitFullscreen();
} else {
enterFullscreen();
}
}
这段代码中,enterFullscreen
函数用于将视频切换到全屏模式,exitFullscreen
函数用于退出全屏模式。toggleFullscreen
函数可以用于切换全屏和非全屏状态。
在代码中,我们使用了不同浏览器提供的全屏API来实现全屏功能。requestFullscreen
、mozRequestFullScreen
、webkitRequestFullscreen
和msRequestFullscreen
分别是不同浏览器提供的进入全屏的方法,exitFullscreen
、mozCancelFullScreen
、webkitExitFullscreen
和msExitFullscreen
分别是不同浏览器提供的退出全屏的方法。
在全屏状态改变时,我们可以通过监听fullscreenchange
事件来执行相应的操作。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。如果你想了解更多关于JavaScript全屏API的信息,可以参考MDN文档。
领取专属 10元无门槛券
手把手带您无忧上云