视频全屏播放展示
本帖最后由 马黑黑 于 2023-2-25 17:22 编辑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()）。
演示在帖子后面的回复。
<style>
#vid {
margin: auto;
display: block;
width: 720px;
height: 460px;
object-fit: fill;
}
</style>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b43fe3735fe4.mp4" autoplay loop></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>
本帖最后由 马黑黑 于 2023-2-25 17:38 编辑
二楼的视频，单击它，进入真全屏，再单击，退出全屏。
video标签其实还有一个双击事件：通常情况下，双击视频会在窗口模式和全屏模式下切换。
如果需要用按钮来控制视频的全屏，请给视频一个有宽高尺寸的父元素，由父元素来请求全屏；视频的尺寸请用 100% 表示其宽高。 二楼代码
<style>
#vid {
margin: auto;
display: block;
width: 720px;
height: 460px;
object-fit: fill;
}
</style>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b43fe3735fe4.mp4" autoplay loop></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>
这规划这理念，让人信服的讲解，慢慢学习努力消化中。。。。。。 这个讲解真细致。谢谢黑黑，学习了{:4_187:} 马黑黑 发表于 2023-2-25 12:50
二楼的视频，单击它，进入真全屏，再单击，退出全屏。
真全屏？看到播放进度什么的都出来了。是指这个吧。 这个讲解真细致， 真不错的代码分享，感谢老师！{:4_204:} 晓哥 发表于 2023-2-25 13:41
这规划这理念，让人信服的讲解，慢慢学习努力消化中。。。。。。
下午好 醉美水芙蓉 发表于 2023-2-25 17:15
谢谢老师分享视频教程！
{:4_190:} 梦缘 发表于 2023-2-25 16:50
真不错的代码分享，感谢老师！
{:4_180:} 红影 发表于 2023-2-25 14:41
真全屏？看到播放进度什么的都出来了。是指这个吧。
真全屏是上下左右没有任何东西，就是元素自身 红影 发表于 2023-2-25 14:37
这个讲解真细致。谢谢黑黑，学习了
{:4_190:} 哇瑟~~惊呆了，点击屏幕立马全屏出来，这个效果真好{:4_178:} 小辣椒 发表于 2023-2-25 17:54
哇瑟~~惊呆了，点击屏幕立马全屏出来，这个效果真好
这个和帖子全屏原理一样的 马黑黑 发表于 2023-2-25 18:06
这个和帖子全屏原理一样的
我这几天拉下的作业太多了，这个要过几天完成了 小辣椒 发表于 2023-2-25 18:09
我这几天拉下的作业太多了，这个要过几天完成了
{:4_181:}