热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue项目中自定义video视频控制条的实现代码

这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

最近公司项目中,添加了视频模块,但是产品觉得Video自带的控制条有点LOW,于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。

首页效果图:

 

需求描述:

当鼠标放在图片上的时候,自动播放视频,并显示预览进度条,当鼠标移开,显示预览图片,再次hover图片,继续上次播放

视频详情页的效果图:

需求描述:

  • 能自定义的暂停和播放
  • 模仿进度条可实现拖拽播放速度
  • 显示当前时间
  • 能选择倍速
  • 能控制声音
  • 能全屏播放

接下来一步步的实现

首先康康首页的,上结构代码:

这里思路是:

1,判断用户鼠标事件,切换图片和视频。

2.video需要通过video来获取他实例来进行dom操作,video的鼠标移入和滑出分类是控制视频的播放和停止,play和pause是video的内置方法。 更多方法见这里哦~

3.这里的进度条使用的是element的滑动条组件,默认max是100,显示视频的时候,这里用v-show判断显隐。

css部分代码:

.video-box {
  position: relative;
  height: 176px;

  &>img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  }

  &>video {
  object-fit: fill; //拉伸填充盒子,保证和图片一样大
  }

 }

css部分主要是要注意让video显示的时候和图片的宽高一致,不然就会出现图片大,视频小的情况,如图:

逻辑部分:

data() {
 return {
 id:0, //保存当前播放的视频id
 currentTimeVal:0 //进度条
 }
},
methods:{
 //开始播放
 play(val) {
 this.id = val
 },
 // 停止播放,显示图片清零进度条
 pause(val) {
 this.id = 0
 this.currentTimeVal = 0
 },
 // 公共video获取时间
 commonVideoUpdata(id) {
  let videoObj = this.$refs.videoAll
  console.log(videoObj);
  let currTime = videoObj[id].currentTime //当前时间
  let duration = videoObj[id].duration //总时间
  let pre = currTime / duration
  this.currentTimeProgress = pre * 100;
 },
}

这里使用video 的timeupdate内置方法获取当前播放时间,并获取当前的的dom元素,这里的videoObj打印出来是个数组:

我们通过当前元素在数组中循环出来的索引来获取对应视频的时间,最后一个简单的计算进度条的方法,(当前时间 / 总时间)* 100 = 进度条的值

注意坑点

:如果在数组中掺杂了其他的非视频文件,这里使用ref的方式,就不能根据索引来获取,就得定义唯一的ref,嘿嘿!

到此首页功能结束了,接着实现详情页的自定义控制条。

html部分:

//视频中的暂停按钮
// 控制条的播放和暂停按钮

//播放进度条
//当前播放时间
{{vcCurrentTime}}
//视频总时长
{{item.duration_time}}
//倍速控制
{{speedTime}} 0.5x 1x 1.5x 2x 3x
//音量控制
//全屏播放

css部分忽略了。。。

直接看功能:首先data部分:

vcIsPlay: false, //是否播放
 opcityVal: {
 opacity: '1'
 },
 currentTimeVal: 0, // 当前时间
 vcCurrentTime: '00:00:00', //当前时间格式化
 vcProgress: 0, //进度条的绑定时间
 durationProgress: 0, //当前视频的总时长
 speedTime: '1x', //倍速
 voiceProgress: 0 //声音

暂停和播放:

// 播放和暂停视频
 controlVideo() {
 let videoObj = this.$refs.videoCon
 this.duratiOnProgress= videoObj[0].duration //总时间
 if (this.vcIsPlay) {
 videoObj[0].pause()
 } else {
 videoObj[0].play()
 }
 this.vcIsPlay = !this.vcIsPlay
 this.opcityVal.opacity = this.opcityVal.opacity == '1' ? '0' : '1'
 },

直接调用提供的两个方法即可,然后使用vue的style绑定控制暂停按钮的显隐即可,这里的进度条,我换了种玩法,同样是element的滑动条组件,只不过max值我换成了总时长,单位秒,原因请耐心看下文,嘿嘿!

进度条部分:

// 获取时间
 videoTimeUpdate() {
 let videoObj = this.$refs.videoCon
 let currTime = videoObj[0].currentTime //当前时间
 this.vcProgress = currTime //赋值给进度条
 this.vcCurrentTime = this.getFormatVideoTime(currTime)
 console.log(this.vcCurrentTime) //"00:00:27"
 },
 //格式化时间
 getFormatVideoTime(time) {
 let curtime = time
 let h = parseInt(curtime / 3600)
 let m = parseInt((curtime % 3600) / 60)
 let s = parseInt(curtime % 60)
 h = h <10 &#63; '0' + h : h
 m = m <10 &#63; '0' + m : m
 s = s <10 &#63; '0' + s : s
 return h + ':' + m + ':' + s
 },

这里难点是,我如何进行拖动进度条,来进行控制呢?

别慌,看 代码:

@change="getNewTime" //element 的滑动组件有个chang事件
 getNewTime(val) {
 let videoObj = this.$refs.videoCon
 console.log(val)
 videoObj[0].currentTime = val
 },

通过change进度条,然后重新赋值给当前时间就搞定了,可以说是炒鸡舒服了

倍速部分:

// 获取当前播放的速度
 handleCommand(val) {
 let videoObj = this.$refs.videoCon
 switch (val) {
 case '1':
  videoObj[0].playbackRate = 0.5
  this.speedTime = '0.5x'
  break
 case '2':
  videoObj[0].playbackRate = 1
  this.speedTime = '1x'
  break
 case '3':
  videoObj[0].playbackRate = 1.5
  this.speedTime = '1.5x'
  break
 case '4':
  videoObj[0].playbackRate = 2
  this.speedTime = '2x'
  break
 case '5':
  videoObj[0].playbackRate = 3
  this.speedTime = '3x'
  break

 default:
  videoObj[0].playbackRate = 1
  this.speedTime = '1x'
  break
 }
 },

看图:

这里使用的是element的下拉组件,同样,Video的playbackRate可以直接赋值,控制播放速度

声音部分:

// 设置声音

 getNewVoice(val) {
 let videoObj = this.$refs.videoCon
 let newVc = val / 100 //h5规定,volume的值必须再0-1之间,比如0.5就是50%的音量,但是进度条的值为100,因此这里做个除法
 videoObj[0].volume = newVc //赋值
 },

我也是使用的滑组件,max值保持默认的100,然后滑动改变的时候,把默认值除100,比如当前滑块的新值是50,除100后得到的就是【0-1】范围里的合法值,Video提供的volume值如果不在 0-1之间,就会报错

最后是全屏部分:

// 全屏播放
 getFullSceen() {
 let videoObj = this.$refs.videoCon
 videoObj[0].webkitRequestFullScreen()
 },

但是我看到网上还有一种方法是模拟按下f11的全部,如果有兴趣也可以了解下!

总结

因为之前没有很仔细的搞过video,所以对它很多的内置属性和方法不了解,没经验就害怕,很慌很慌,这就跟谈恋爱似的,哈哈哈,再组长的支持和鼓励下,我大胆的尝试了,成功后,这次经验给了我很大信心,感觉以后写其他没做过的功能,都不会慌了,毕竟难的部分写elementUi的大佬们都给写好了,可以说是站在巨人的肩膀上,哈哈哈!膜拜大佬,以后还得多多努力了。

到此这篇关于vue项目中自定义video视频控制条的实现代码的文章就介绍到这了,更多相关vue 自定义video视频控制条内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • 在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ... [详细]
  • Java EE 平台集成了多种服务、API 和协议,旨在支持基于 Web 的多层应用程序开发。本文将详细介绍 Java EE 中的 13 种关键技术规范,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • h5调用本地摄像头和麦克风一
    h5调用本地摄像头和麦克风一,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 在 Vue 中,可以通过 `ref` 属性精确控制滚动条的位置。具体来说,使用 `ref` 获取 DOM 元素,并通过事件处理函数(如点击事件)来调整滚动条的滚动距离。需要注意的是,直接使用 `$refs` 可能不会立即生效,因此需要确保在适当的生命周期钩子或异步操作中进行操作。此外,结合 `nextTick` 方法可以确保 DOM 更新完成后再执行滚动操作,从而实现更稳定的控制效果。 ... [详细]
  • 在今天的实践中,我深入学习了网页图像抓取技术,通过编写爬虫程序批量获取网站上的图片资源。具体来说,我选择了一个包含大量高质量图片的网站作为练习对象,并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解,还增强了我的编程能力。 ... [详细]
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
author-avatar
过去丶真的過卜去
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有