|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 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())。
演示在帖子后面的回复。
|
评分
-
| 参与人数 4 | 威望 +180 |
金钱 +360 |
经验 +180 |
收起
理由
|
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
梦缘
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|