Recently, I encountered a full-screen switching function of video window during project development, so I will make a record here.
Specific implementation ideas:
<template>
<div class="content-box">
<div class="container">
<div class="screen">
<el-button @click="screen()">
{{ fullscreen ? "reduction" : "maximize" }}
</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fullscreen: false,
};
},
mounted() {
("resize", ()=> {
if (!()) {
// Non-full screen = false;
}
});
},
methods: {
//Judge whether it is full screen isFullScreen() {
return !!( || ());
},
fullele() {
return (
||
||
||
||
null
);
},
screen() {
let element = ("screen");
if () {
// Turn off full screen if () {
();
} else if () {
();
} else if () {
();
} else if () {
();
}
} else {
// full screen if () {
();
} else if () {
();
} else if () {
();
} else if () {
// IE11
();
}
}
= !;
},
},
};
</script>
<style lang="scss" scoped>
.screen {
width: 500px;
height: 500px;
background-color: #fff;
border: 1px solid red;
}
</style>Here you need to monitor the ESC key, and special treatment has been made for this. Here is a demo, which is basically the same as using the renderings.
Knowledge Supplement
In addition to implementing full-screen video switching, vue can also implement full-screen browser and exit full-screen. The following is the implementation code, I hope it will be helpful to everyone.
Add the following code block in src/utils/
import Vue from 'vue'
const util = = {}
// Switch full screen = function (element) {
element = element || ;
if () {
();
} else if () {
();
} else if () {
();
} else if () {
();
}
}
// Exit full screen = function () {
if () {
();
} else if () {
();
} else if () {
();
}
}
export {
util
}
2. Use full screen/exit full screen in the page
<template>
<div class="header">
<!-- full screen -->
<a v-if="fullScreenFlag" href="javascript:;" rel="external nofollow" rel="external nofollow" class="iconfont iconquanping" title="full screen" @click="fullScreen()"></a>
<!-- 退出full screen -->
<a v-else href="javascript:;" rel="external nofollow" rel="external nofollow" class="iconfont icontuichuquanping1" title="Exit full screen" @click="exitFullScreen()"></a>
</div>
</template>
<script>
export default {
data () {
return {
fullScreenFlag: true,
};
},
methods: {
// full screen fullScreen(){
= false;
();
},
// Exit full screen exitFullScreen() {
= true;
();
},
},
};
</script>This is the end of this article about Vue implementing the full-screen switching function of video. For more related contents of Vue video full-screen switching, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!