1. 页面结构

2. 全屏方法

3. 截图方法

4. 样式代码

5. 效果截图

6. 附上完整代码

最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。

未全屏状态下自定义控制栏的组件样式。（进度条、音量、倍速等组件全部已经重写）

全屏后，发现控制栏已经变成原生的样式

具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，

就只能改变策略，将video的父级容器全屏，再将video宽高设置100%，进而达到全屏效果，再次基础上叠加需要的控制栏的元素按钮等，实现自定义控制栏。

1. 页面结构

其中全屏实际作用于id="video-box"这个div，通过按钮控制全屏，将外层的视频容器全屏，再将内部的video元素修改宽高，进而达到全屏效果，再次基础上可以叠加我们想要的操作栏和操作按钮

 <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) {// IE11element.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;
}/*初始化状态video样式*/
.video {object-fit: cover;width: 700px;
}/*全屏状态下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. 效果截图

初始化状态下展示效果

点击全屏后的展示效果

点击截图效果

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) {// IE11element.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;
}/*初始化状态video样式*/
.video {object-fit: cover;width: 700px;
}/*全屏状态下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>

video全屏操作栏自定义样式js 指定元素全屏视频截图下载相关推荐

js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等
安装 npm install screenfull --save 使用方法 import screenfull from "screenfull"; 属性 screenfull.i ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html中iframe全屏显示,如何让iframe中的元素全屏
最近项目中iframe让人恶心,iframe只要一出现,写的正常代码就容易出现各种bug,比如iframe中的元素不能document.getElementBy...正常获取,比如iframe中的元素 ...
linux补全参数的命令,自定义linux命令参数补全以提高工作效率
我们在使用bash命令时,会经常使用二次tab键进行补齐. 例如我们常用的telnet命令,在输入二次tab键时,会列出当前系统配置的所有主机名,供选择 # 输入 telnet [huangcihui ...
html网页全选效果,为什么我用js写的全选/反选/全不选页面，没有效果？
代码奉上清空买什么书? PHP HTML5 全选反选全不选 function checkall(form,status){ var elements = form.getElementByTa ...
JavaScript 技术篇 - js 查看哪个元素获取了焦点，js 指定元素获取焦点方法
查看焦点元素通过 document.activeElement 可以获取哪个元素获取到了焦点. 如图所示,我的光标在这个查询框里. 可以获取到该元素. 使指定元素获取焦点 focus() 方法可以使 ...
JS 指定元素滚动到屏幕中间
点击元素,使该元素滚动到屏幕中间 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...

video全屏操作栏自定义样式js 指定元素全屏视频截图下载

1. 页面结构

2. 全屏方法

3. 截图方法

4. 样式代码

5. 效果截图

6. 附上完整代码

video全屏操作栏自定义样式js 指定元素全屏视频截图下载相关推荐

最新文章

热门文章