目錄
1. 頁面結(jié)構(gòu)
2. 全屏方法
3. 截圖方法
4. 樣式代碼
5. 效果截圖
6. 附上完整代碼
最近遇到的需求就是重新video標簽的控制欄的樣式，包括進度條、音量、倍速、全屏等樣式，在正常狀態(tài)下，可以將原生樣式隱藏掉自定義新的控制欄元素定位上去，但是全屏后樣式失效，出現(xiàn)的還是原生的控制欄。
未全屏狀態(tài)下自定義控制欄的組件樣式。（進度條、音量、倍速等組件全部已經(jīng)重寫）
全屏后，發(fā)現(xiàn)控制欄已經(jīng)變成原生的樣式
具體是f12 可以看出，自定義的組件其實還在原先的位置，全屏后的video新增的偽類和樣式無法修改，
就只能改變策略，將video的父級容器全屏，再將video寬高設(shè)置100%，進而達到全屏效果，再次基礎(chǔ)上疊加需要的控制欄的元素按鈕等，實現(xiàn)自定義控制欄。
1. 頁面結(jié)構(gòu)
其中全屏實際作用于id="video-box"這個div，通過按鈕控制全屏，將外層的視頻容器全屏，再將內(nèi)部的video元素修改寬高，進而達到全屏效果，再次基礎(chǔ)上可以疊加我們想要的操作欄和操作按鈕
<div id="video-box">
<button class="btn-full" @click="screen">{{ isFull ? '退出全屏' : '全屏' }}</button>
<button class="btn-shot" @click="screenshot">截圖</button>
<video ref="video" :class="{'video': true,'full':isFull}" :src="srcVideo" controls="controls" loop/>
</div>下面是兩個變量?
data() {
return {
srcVideo: require('@/assets/video/videoDemo.mp4'),
isFull: false, // 是否全屏
}
},2. 全屏方法
// 全屏
screen() {
const element = document.getElementById("video-box");
this.isFull = !this.fullscreen;
if (this.fullscreen) {
console.log('exit');
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
console.log('full');
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},3. 截圖方法
// 截圖
screenshot() {
const video = this.$refs.video;
const canvas = document.createElement("canvas");
const tempLink = document.createElement('a');
const ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
tempLink.href = canvas.toDataURL();
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
} else {
tempLink.setAttribute('download', '下載.png');//自定義下載的名字，需要加上.png的后綴
}
document.body.appendChild(tempLink);
tempLink.click();
setTimeout(function () {//移除a標簽
document.body.removeChild(tempLink);
}, 100)
},4. 樣式代碼
<style>
/*父級容器*/
#video-box {
position: relative;
background: antiquewhite;
border: 1px solid red;
}
/*初始化狀態(tài)video樣式*/
.video {
object-fit: cover;
width: 700px;
}
/*全屏狀態(tài)下video樣式*/
.full {
width: 100%;
height: 100%;
}
/*隱藏全屏按鈕*/
video::-webkit-media-controls-fullscreen-button {
display: none;
}
.btn-full {
position: absolute;
bottom: 40px;
right: 40%;
z-index: 20;
}
.btn-shot {
position: absolute;
bottom: 40px;
right: 45%;
z-index: 20;
}
button {
background: transparent;
color: yellow;
border: none;
font-weight: bold;
box-shadow: 1px 1px 5px inset #fff;
border-radius: 2px;
}
button:hover {
cursor: pointer;
box-shadow: 1px 1px 5px #fff;
}
</style>?5. 效果截圖
初始化狀態(tài)下展示效果
?點擊全屏后的展示效果
點擊截圖效果文章來源：http://www.zghlxwxcb.cn/news/detail-528457.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-528457.html
6. 附上完整代碼
<template>
<div id="video-box">
<button class="btn-full" @click="screen">{{ isFull ? '退出全屏' : '全屏' }}</button>
<button class="btn-shot" @click="screenshot">截圖</button>
<video ref="video" :class="{'video': true,'full':isFull}" :src="srcVideo" controls="controls" loop/>
</div>
</template>
<script>
export default {
name: "originVideo",
data() {
return {
srcVideo: require('@/assets/video/videoDemo.mp4'),
isFull: false, // 是否全屏
}
},
methods: {
// 全屏
screen() {
const element = document.getElementById("video-box");
this.isFull = !this.fullscreen;
if (this.fullscreen) {
console.log('exit');
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
console.log('full');
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
// 截圖
screenshot() {
const video = this.$refs.video;
const canvas = document.createElement("canvas");
const tempLink = document.createElement('a');
const ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
tempLink.href = canvas.toDataURL();
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
} else {
tempLink.setAttribute('download', '下載.png');//自定義下載的名字，需要加上.png的后綴
}
document.body.appendChild(tempLink);
tempLink.click();
setTimeout(function () {//移除a標簽
document.body.removeChild(tempLink);
}, 100)
},
}
}
</script>
<style>
/*父級容器*/
#video-box {
position: relative;
background: antiquewhite;
border: 1px solid red;
}
/*初始化狀態(tài)video樣式*/
.video {
object-fit: cover;
width: 700px;
}
/*全屏狀態(tài)下video樣式*/
.full {
width: 100%;
height: 100%;
}
/*隱藏全屏按鈕*/
video::-webkit-media-controls-fullscreen-button {
display: none;
}
.btn-full {
position: absolute;
bottom: 40px;
right: 40%;
z-index: 20;
}
.btn-shot {
position: absolute;
bottom: 40px;
right: 45%;
z-index: 20;
}
button {
background: transparent;
color: yellow;
border: none;
font-weight: bold;
box-shadow: 1px 1px 5px inset #fff;
border-radius: 2px;
}
button:hover {
cursor: pointer;
box-shadow: 1px 1px 5px #fff;
}
</style>到了這里，關(guān)于video全屏操作欄自定義樣式&&js 指定元素全屏&&視頻截圖下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
