### 实现
Vue2 中视频
点击后
全屏放大的功能
为了实现在
Vue2 项目中的视频
点击后
全屏放大的功能，可以借鉴一些现有的解决方案并结合 HTML5 Video API 和 JavaScript 来完成这一目标。下面是一个详细的实现方法：
#### 方法概述
创建一个简单的
Vue 组件来封装视频播放器及其
全屏控制逻辑。利用 `v
-if` 或者 `v
-show` 控制常规视图与
全屏视图之间的切换。
#### 安装依赖库 (如果需要)
对于某些特定需求如萤石摄像头的支持，则可能需要用到官方 SDK 或其他第三方插件[^1]。不过针对基本的HTML5 video标签操作并不强制要求额外安装任何东西。
#### 编写组件模板部分
```html
<template>
<div class="video
-container">
<!
-- 正常尺寸下的视频
-->
<video ref="myVideoPlayer" controls @click="toggleFullscreen()">
<source src="your_video_url_here
.mp4" type="video/mp4"/>
Your browser does not support the video tag
.
</video>
<!
-- 全屏幕模式下隐藏原生控件, 使用自定义样式覆盖整个页面
-->
<transition name="fade">
<div v
-if="isFullScreenActive" id="custom
-fullscreen
-overlay"></div>
</transition>
</div>
</template>
```
#### 添加脚本逻辑处理
```javascript
<script>
export default {
data() {
return {
isFullScreenActive: false,
};
},
methods: {
toggleFullscreen() {
const elem = this
.$refs
.myVideoPlayer;
if (!this
.isFullScreenActive && !document
.fullscreenElement) { // 请求进入
全屏状态
if (elem
.requestFullscreen) {
elem
.requestFullscreen();
} else if (elem
.mozRequestFullScreen) { /* Firefox */
elem
.mozRequestFullScreen();
} else if (elem
.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem
.webkitRequestFullscreen();
} else if (elem
.msRequestFullscreen) { /* IE/Edge */
elem
.msRequestFullscreen();
}
this
.isFullScreenActive = true;
} else { // 如果已经在
全屏状态下则退出
全屏
document
.exitFullscreen()
.then(() => {
this
.isFullScreenActive = false;
});
}
// 防止冒泡事件触发多次调用此函数
event
.stopPropagation();
},
handleExitFullscreenChange(event){
if(!event
.target
.fullscreenElement){
this
.isFullScreenActive=false;
}
}
},
mounted(){
document
.addEventListener('fullscreenchange', this
.handleExitFullscreenChange);
document
.addEventListener('webkitfullscreenchange', this
.handleExitFullscreenChange); // For WebKit
-based browsers like Safari
document
.addEventListener('mozfullscreenchange', this
.handleExitFullscreenChange); // For older versions of Firefox
document
.addEventListener('MSFullscreenChange', this
.handleExitFullscreenChange); // For Internet Explorer / Edge
},
beforeDestroy(){
document
.removeEventListener('fullscreenchange', this
.handleExitFullscreenChange);
document
.removeEventListener('webkitfullscreenchange', this
.handleExitFullscreenChange);
document
.removeEventListener('mozfullscreenchange', this
.handleExitFullscreenChange);
document
.removeEventListener('MSFullscreenChange', this
.handleExitFullscreenChange);
}
}
</script>
```
#### 设置 CSS 样式美化界面
```css
<style scoped>
.video
-container {
position: relative;
}
/* 自定义
全屏层样式 */
#custom
-fullscreen
-overlay {
background
-color: rgba(0, 0, 0,
.8);
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z
-index: 9999;
display: flex;
justify
-content: center;
align
-items: center;
}
.fade
-enter
-active,
.fade
-leave
-active {
transition: opacity
.3s ease
-in
-out;
}
.fade
-enter,
.fade
-leave
-to /*
.fade
-leave
-active below version
2.1
.8 */ {
opacity: 0;
}
</style>
```
上述代码展示了如何在一个
Vue2 应用程序中构建具有
全屏能力的视频播放器，并且提供了良好的用户体验设计考虑。当用户
单击视频时会尝试将其置入浏览器提供的
全屏模式；而一旦离开该模式，便会自动更新 UI 反映当前状态变化。
扫一扫
1935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
