视频全屏播放展示

马黑黑

JS 的 requestFullscreen 方法支持将一切可视元素全屏展现，视频自然也可以通过它实现真全屏播放的功能。

不过，我们不急于将视频全屏展现，我们先来设置视频标签，因为这是基本功。

视频的HTML标签代码，请参考如下基本的示例：

    <video id="vid" src="视频地址" autoplay loop></video>

它和音频的 audio 标签很相似，但它可以再丰富一些，这里不做介绍。

下一步，我们要用 CSS 来设置一下 video 标签：

        #vid {
                margin: auto;
                display: block;
                width: 720px;
                height: 460px;
                object-fit: fill;
        }


第一、第二个属性，margin 和 display，不是关键代码，它们的作用是令视频水平居中；第三、第四个属性设置视频的宽高尺寸；第五个属性，object-fit 的值设为 fill，是令视频布局能够以拉伸的方式填满前面预设的视频的宽高尺寸，没有这个设置的话，视频可能上下或左右留有白边（也可能是黑边，不过进入全屏模式后这个问题不存在）。

好，下面可以讨论如何全屏播放视频了。

视频不能加入HTML元素，给它添加一个按钮切换进入和退出全屏是没有办法的。如此，最简单的切换全屏/正常模式的方法是单击视频，但video标签默认有一个鼠标单击事件，单击时会在暂停和播放之间来回切换，我们要处理这个事件：阻止默认事件。请看代码：

<script>
let fs = false;
document.addEventListener('fullscreenchange', () => fs = document.fullscreenElement !== null ? true : false);
vid.onclick = (e) => {
        e.preventDefault();
        fs ? document.exitFullscreen() : vid.requestFullscreen();
}
</script>

首先，声明一个 fs 布尔变量，用它来记录当前页面是否处于全屏状态。

接着，给 document 添加一个监听事件，监听内容是 fullscreenchange，就是全屏的变化，如果页面存在全屏元素（document.fullscreenElement !== null ），则 fs = true，反之，fs = false。

最后，是 video 的单击事件，先阻止 video 单击事件的默认行为（该行为是视频的暂停/播放切换），然后根据布尔变量 fs 的值来决定，单击视频是文档退出全屏（document.exitFullscreen() ）还是视频进入全屏（vid.requestFullscreen()）。

演示在帖子后面的回复。

马黑黑

马黑黑

二楼的视频，单击它，进入真全屏，再单击，退出全屏。
video标签其实还有一个双击事件：通常情况下，双击视频会在窗口模式和全屏模式下切换。

马黑黑

如果需要用按钮来控制视频的全屏，请给视频一个有宽高尺寸的父元素，由父元素来请求全屏；视频的尺寸请用 100% 表示其宽高。

马黑黑

二楼代码

1. <style>
   
2. #vid {
   
3.         margin: auto;
   
4.         display: block;
   
5.         width: 720px;
   
6.         height: 460px;
   
7.         object-fit: fill;
   
8. }
   
9. </style>
   
10. 
    
11. <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b43fe3735fe4.mp4" autoplay loop></video>
    
12. 
    
13. <script>
    
14. 
    
15. let fs = false;
    
16. 
    
17. document.addEventListener('fullscreenchange', () => fs = document.fullscreenElement !== null ? true : false);
    
18. 
    
19. vid.onclick = (e) => {
    
20.         e.preventDefault();
    
21.         fs ? document.exitFullscreen() : vid.requestFullscreen();
    
22. }
    
23. 
    
24. </script>

复制代码

晓哥

这规划这理念，让人信服的讲解，慢慢学习努力消化中。。。。。。

红影

这个讲解真细致。谢谢黑黑，学习了

红影

马黑黑 发表于 2023-2-25 12:50
二楼的视频，单击它，进入真全屏，再单击，退出全屏。

真全屏？看到播放进度什么的都出来了。是指这个吧。

山里人

这个讲解真细致，

梦缘

真不错的代码分享，感谢老师！

马黑黑

晓哥 发表于 2023-2-25 13:41
这规划这理念，让人信服的讲解，慢慢学习努力消化中。。。。。。

下午好

马黑黑

醉美水芙蓉 发表于 2023-2-25 17:15
谢谢老师分享视频教程！

马黑黑

梦缘 发表于 2023-2-25 16:50
真不错的代码分享，感谢老师！

马黑黑

红影 发表于 2023-2-25 14:41
真全屏？看到播放进度什么的都出来了。是指这个吧。

真全屏是上下左右没有任何东西，就是元素自身

马黑黑

红影 发表于 2023-2-25 14:37
这个讲解真细致。谢谢黑黑，学习了

小辣椒

哇瑟~~惊呆了，点击屏幕立马全屏出来，这个效果真好

马黑黑

小辣椒 发表于 2023-2-25 17:54
哇瑟~~惊呆了，点击屏幕立马全屏出来，这个效果真好

这个和帖子全屏原理一样的

小辣椒

马黑黑 发表于 2023-2-25 18:06
这个和帖子全屏原理一样的

我这几天拉下的作业太多了，这个要过几天完成了

马黑黑

小辣椒 发表于 2023-2-25 18:09
我这几天拉下的作业太多了，这个要过几天完成了