首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript:如何切换HTML5视频全屏/非全屏?

JavaScript可以通过使用全屏API来实现切换HTML5视频的全屏和非全屏模式。下面是一个示例代码:

代码语言:txt
复制
// 获取视频元素
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来实现全屏功能。requestFullscreenmozRequestFullScreenwebkitRequestFullscreenmsRequestFullscreen分别是不同浏览器提供的进入全屏的方法,exitFullscreenmozCancelFullScreenwebkitExitFullscreenmsExitFullscreen分别是不同浏览器提供的退出全屏的方法。

在全屏状态改变时,我们可以通过监听fullscreenchange事件来执行相应的操作。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。如果你想了解更多关于JavaScript全屏API的信息,可以参考MDN文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券