HTML5 video 全屏播放

最新推荐文章于 2024-04-26 11:39:38 发布

啊呀阿荼

最新推荐文章于 2024-04-26 11:39:38 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏：基础 vue html 文章标签： html5 javascript js html vue.js

本文链接：https://blog.csdn.net/qq_34724739/article/details/116797646

vue 同时被 3 个专栏收录

9 篇文章

订阅专栏

基础

8 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文详细介绍了如何使用HTML5的video元素实现全屏播放功能，包括requestFullScreen、mozRequestFullScreen、webkitRequestFullScreen等方法的调用，以及关键的全屏事件监听。通过实例代码演示了如何在不同浏览器环境下实现全屏切换并捕获相应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 video 全屏播放

调用系统全屏

launchFullScreen(element) {
        if (element.requestFullScreen) {
          element.requestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        }
      },

监听全屏事件

document.addEventListener('fullscreenchange', function (e) {
        console.log(e);
      });
      document.addEventListener('mozfullscreenchange', function (e) {
        console.log(e);
      });
      document.addEventListener('webkitfullscreenchange', function (e) {
         console.log(e);
      });
      document.addEventListener('MSfullscreenchange', function (e) {
        console.log(e);
      });