文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

从0到1搭建一款Vue可配置视频播放器组件

2024-12-03 14:11

关注

 前言

话不多说，这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时，会看到有很多丰富样式的视频播放器，而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的，只不过还得适当加工一下，才会有我们所看到的漂亮的视频播放器。

开发

在具体开发之前，我们需要明确我们需要做什么?

  1. 封装一个可配置的视频播放器;
  2. 适用于Vue.js;
  3. 应用于PC端网站;
  4. 视频播放器常用的功能必须要有;
  5. 发布到Npm;

好，明确了以上几点之后，我们就开始敲代码了。

一、搭建一个基础的UI组件

这里的UI组件你可以理解成我们搭建一个静态页面，就是把视频播放器简单地搭建起来，有一个基础的模型。

  1.  
  2.  
  3.  
  4.  
  5.  
  6. @import "./css/iconfont/iconfont.css"; 
  7. @import "./css/index.css"; 
  8.  

样式文件我这里就不展示了，我会在文末给出源码地址。


二、开发逻辑执行文件

最最关键的部分莫过于逻辑文件了，我这里使用构造函数的方式。

  1. // eslint-disable-next-line no-unused-vars 
  2. function VamVideo(vp, attrObj, styleObj) { 
  3.   // 初始化 
  4.   this.timer = null; 
  5.   this.disX = 0; 
  6.   this.disL = 0; 
  7.   this.isPageFullScreen = false; 
  8.   // 处理视频属性 
  9.   for (const key in attrObj) { 
  10.     if (Object.hasOwnProperty.call(attrObj, key) && key !== "controls") { 
  11.       $(".video-player").setAttribute(key, attrObj[key]); 
  12.     } 
  13.   } 
  14.   // 处理视频样式 
  15.   for (const key in styleObj) { 
  16.     if (Object.hasOwnProperty.call(styleObj, key)) { 
  17.       $(".video-box").style[`${key}`] = styleObj[key]; 
  18.       key === "width" 
  19.         ? (this.vbw = styleObj.width) 
  20.         : (this.vbw = vp.offsetWidth); 
  21.       key === "height" 
  22.         ? (this.vbh = styleObj.height) 
  23.         : (this.vbh = vp.offsetHeight); 
  24.     } 
  25.   } 
  26.   // 封装获取元素节点 
  27.   function $(el) { 
  28.     return document.querySelector(el); 
  29.   } 
  30.   // 处理当前时间 
  31.   function nowTime() { 
  32.     $(".pv-currentTime").innerHTML = changeTime($(".video-player").currentTime); 
  33.     let scale = $(".video-player").currentTime / $(".video-player").duration; 
  34.     let w = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  35.     $(".pv-dot").style.left = scale * w + "px"; 
  36.     $(".pv-played").style.width = scale * w + "px"; 
  37.   } 
  38.   // 处理时分秒 
  39.   function changeTime(iNum) { 
  40.     let iN = parseInt(iNum); 
  41.     const iH = toZero(Math.floor(iN / 3600)); 
  42.     const iM = toZero(Math.floor((iN % 3600) / 60)); 
  43.     const iS = toZero(Math.floor(iN % 60)); 
  44.     return iH + ":" + iM + ":" + iS; 
  45.   } 
  46.   // 补0 
  47.   function toZero(num) { 
  48.     if (num <= 9) { 
  49.       return "0" + num; 
  50.     } else { 
  51.       return "" + num; 
  52.     } 
  53.   } 
  54.   // 元素显示 
  55.   this.showEl = function (el) { 
  56.     $(el).style.display = "block"; 
  57.   }; 
  58.   // 元素隐藏 
  59.   this.hideEl = function (el) { 
  60.     $(el).style.display = "none"; 
  61.   }; 
  62.   // 动态设置视频宽高 
  63.   this.setVp = function (w, h) { 
  64.     const _w = String(w).indexOf("px") != -1 ? w : w + "px"; 
  65.     const _h = String(h).indexOf("px") != -1 ? h : h + "px"; 
  66.     $(".video-player").style.width = _w; 
  67.     $(".video-player").style.height = _h; 
  68.     $(".video-box").style.width = _w; 
  69.     $(".video-box").style.height = _h; 
  70.     $(".pv-bar").style.width = _w; 
  71.   }; 
  72.   // 底部控制栏(显示/隐藏) 
  73.   this.bottomTup = function () { 
  74.     $(".bottom-tool").style.bottom = "0px"; 
  75.   }; 
  76.   this.bottomTdow = function () { 
  77.     $(".bottom-tool").style.bottom = "-45px"; 
  78.   }; 
  79.   // 播放/暂停 
  80.   this.usePlay = function () { 
  81.     if ($(".video-player").paused) { 
  82.       $(".video-player").play(); 
  83.       this.hideEl(".icon-bofang"); 
  84.       this.showEl(".icon-zanting"); 
  85.       nowTime(); 
  86.       this.timer = setInterval(nowTime, 1000); 
  87.     } else { 
  88.       $(".video-player").pause(); 
  89.       this.showEl(".icon-bofang"); 
  90.       this.hideEl(".icon-zanting"); 
  91.       clearInterval(this.timer); 
  92.     } 
  93.   }; 
  94.   this.isplay = function () { 
  95.     this.usePlay(); 
  96.   }; 
  97.   // 总时长 
  98.   this.useOnplay = function () { 
  99.     $(".pv-duration").innerHTML = changeTime($(".video-player").duration); 
  100.   }; 
  101.   // 播放结束 
  102.   this.useEnd = function () { 
  103.     this.showEl(".icon-bofang"); 
  104.     this.hideEl(".icon-zanting"); 
  105.   }; 
  106.   // 静音 
  107.   this.useVolume = function () { 
  108.     if ($(".video-player").muted) { 
  109.       $(".video-player").volume = 1; 
  110.       this.hideEl(".icon-jingyin"); 
  111.       this.showEl(".icon-yinliang"); 
  112.       $(".video-player").muted = false; 
  113.     } else { 
  114.       $(".video-player").volume = 0; 
  115.       this.showEl(".icon-jingyin"); 
  116.       this.hideEl(".icon-yinliang"); 
  117.       $(".video-player").muted = true; 
  118.     } 
  119.   }; 
  120.   // 页面全屏 
  121.   this.pageFullScreen = function () { 
  122.     const w = document.documentElement.clientWidth || document.body.clientWidth; 
  123.     const h = 
  124.       document.documentElement.clientHeight || document.body.clientHeight; 
  125.     this.isPageFullScreen = !this.isPageFullScreen; 
  126.     if (this.isPageFullScreen) { 
  127.       this.setVp(w, h); 
  128.       this.hideEl(".icon-quanping"); 
  129.       this.showEl(".icon-huanyuan"); 
  130.       this.hideEl(".pv-screens"); 
  131.     } else { 
  132.       this.setVp(this.vbw, this.vbh); 
  133.       this.showEl(".icon-quanping"); 
  134.       this.hideEl(".icon-huanyuan"); 
  135.       this.showEl(".pv-screens"); 
  136.     } 
  137.   }; 
  138.   // 窗口全屏 
  139.   this.fullScreen = function () { 
  140.     const el = $(".video-box"); 
  141.     const isFullscreen = 
  142.       document.fullScreen || 
  143.       document.mozFullScreen || 
  144.       document.webkitIsFullScreen; 
  145.     if (!isFullscreen) { 
  146.       this.showEl(".icon-tuichuquanping"); 
  147.       this.hideEl(".icon-shipinquanping"); 
  148.       this.hideEl(".pv-screen"); 
  149.       (el.requestFullscreen && el.requestFullscreen()) || 
  150.         (el.mozRequestFullScreen && el.mozRequestFullScreen()) || 
  151.         (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || 
  152.         (el.msRequestFullscreen && el.msRequestFullscreen()); 
  153.     } else { 
  154.       this.showEl(".icon-shipinquanping"); 
  155.       this.hideEl(".icon-tuichuquanping"); 
  156.       this.showEl(".pv-screen"); 
  157.       document.exitFullscreen 
  158.         ? document.exitFullscreen() 
  159.         : document.mozCancelFullScreen 
  160.         ? document.mozCancelFullScreen() 
  161.         : document.webkitExitFullscreen 
  162.         ? document.webkitExitFullscreen() 
  163.         : ""; 
  164.     } 
  165.   }; 
  166.   // 播放进度条 
  167.   this.useTime = function (ev) { 
  168.     let ev1 = ev || window.event; 
  169.     this.disX = ev1.clientX - $(".pv-dot").offsetLeft; 
  170.     document.onmousemove = (ev) => { 
  171.       let ev2 = ev || window.event; 
  172.       let L = ev2.clientX - this.disX; 
  173.       if (L < 0) { 
  174.         L = 0; 
  175.       } else if (L > $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth) { 
  176.         L = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  177.       } 
  178.       $(".pv-dot").style.left = L + "px"; 
  179.       let scale = L / ($(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth); 
  180.       $(".video-player").currentTime = scale * $(".video-player").duration; 
  181.       nowTime(); 
  182.     }; 
  183.     document.onmouseup = function () { 
  184.       document.onmousemove = null; 
  185.     }; 
  186.     return false; 
  187.   }; 
  188.   // 音量控制 
  189.   this.useListen = function (ev) { 
  190.     let ev1 = ev || window.event; 
  191.     this.disL = ev1.clientX - $(".pv-ol").offsetLeft; 
  192.     document.onmousemove = (ev) => { 
  193.       let ev2 = ev || window.event; 
  194.       let L = ev2.clientX - this.disL; 
  195.       if (L < 0) { 
  196.         L = 0; 
  197.       } else if (L > $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth) { 
  198.         L = $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth; 
  199.       } 
  200.       $(".pv-ol").style.left = L + "px"; 
  201.       let scale = L / ($(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth); 
  202.       $(".pv-bg").style.width = $(".pv-ol").offsetLeft + "px"; 
  203.       if ($(".pv-ol").offsetLeft !== 0) { 
  204.         this.showEl(".icon-yinliang"); 
  205.         this.hideEl(".icon-jingyin"); 
  206.       } else { 
  207.         this.showEl(".icon-jingyin"); 
  208.         this.hideEl(".icon-yinliang"); 
  209.       } 
  210.       $(".video-player").volume = scale; 
  211.     }; 
  212.     document.onmouseup = function () { 
  213.       document.onmousemove = null; 
  214.     }; 
  215.     return false; 
  216.   }; 
  217.   // 播放速度 
  218.   this.useSpnum = function (e) { 
  219.     let ev = e || window.event; 
  220.     $(".pv-spnum").innerText = ev.target.innerText; 
  221.     const value = ev.target.innerText.replace("x", ""); 
  222.     $(".video-player").playbackRate = value; 
  223.   }; 
  224. } 
  225. // 导出 
  226. export default VamVideo; 

三、整合组件逻辑

开发完UI组件以及逻辑组件了，那我们接下来就是将两者结合起来。

  1.  
  2.  
  3.  
  4.  
  5.  
  6. @import "./css/iconfont/iconfont.css"; 
  7. @import "./css/index.css"; 
  8.  

首先我们引入了之前开发完成的逻辑文件vp.js，然后在mounted方法中对类VamVideo进行实例化，赋给this.vp。传给类的几个参数分别是最外层节点、视频属性、视屏样式。props属性中的properties为视频属性，videoStyle为视频样式。

四、发布组件

完成了以上几个步骤的开发，我们需要将我们完成的组件发布到Npm上。

1. 初始化

创建一个空文件夹，我们可以取名叫v-vamvideo。在此文件夹下键入命令：

  1. npm init -y 

因为我们还需要修改，所以直接创建package.json文件。

  1. { 
  2.   "name": "vue-vam-video", 
  3.   "version": "1.0.0", 
  4.   "description": "Vue.js Custom video components", 
  5.   "main": "index.js", 
  6.   "author": "maomincoding", 
  7.   "keywords": ["video"], 
  8.   "license": "ISC", 
  9.   "private": false 
  10. } 

2. 引入组件

将我们之前封装好的组件复制到v-vamvide这个文件夹中，下图就是我们之前封装好的组件文件目录。


3. 创建入口文件

我们要发布到Npm上需要一个入口文件，我们在v-vamvide根目录下创建一个入口文件，我们这里叫做index.js。

  1. // 引入组件 
  2. import VamVideo from "./VamVideo/vamvideo.vue"; 
  3. // 组件需要添加name属性，代表注册的组件名称 
  4. VamVideo.install = (Vue) => Vue.component(VamVideo.name, VamVideo); //注册组件 
  5.  
  6. export default VamVideo; 

4. 创建一个说明文档

发布到Npm上，用户需要知道这个组件干什么的?怎么用?我们在v-vamvide根目录下创建一个说明文档，取名为README.md

  1. # vue-vamvideo 
  2. > Vue.js Custom video components 
  3.  
  4. ## Using documents 
  5. 1. Introducing components 
  6. 2. configuration parameter 
  7.  
  8. - `properties`: Video properties. 
  9.  
  10. - `videoStyle`: Video style. 
  11.  
  12. These two parameters need to be set separately. 
  13. *** 
  14.  
  15.  
  16.  
  17. *** 

 我们离成功很近了，所以谢谢你可以阅读到这。源码地址：https://github.com/maomincoding/vue-vam-video

5. 发布

开始操作以下步骤之前，你需要把命令行切换到项目根目录下(也就是这里的v-vamvide这个文件夹)。

查看登录源是否是http://registry.npmjs.org

  1. npm config get registry 

如果不是，切换登录源。

  1. npm config set registry=http://registry.npmjs.org 

登录Npm

  1. npm login 

相继输入用户名、密码、邮箱。回车出现Logged in as maomincoding on http://registry.npmjs.org，那么就登录成功了。

上传发布到Npm

  1. npm publish 

 

五、安装组件

既然我们已经发布到Npm上，我们可以去Npm网站上看下效果。

https://www.npmjs.com/package/vue-vam-video


发布组件成功了，那么我们放在Vue工程上测试一下。

安装组件

  1. npm i vue-vam-video 

注册组件

全局注册

  1. import Vue from 'vue' 
  2. import App from './App.vue' 
  3. // 全局注册 
  4. import VamVideo from "vue-vam-video"; 
  5. Vue.use(VamVideo); 
  6.  
  7. Vue.config.productionTip = false 
  8.  
  9. new Vue({ 
  10.   render: h => h(App), 
  11. }).$mount('#app') 

  1.  
  2.  
  3.  

局部注册

  1.  
  2.  
  3.  

效果 大功告成!


 

来源：前端历劫之路内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

从0到1搭建一款Vue可配置视频播放器组件

后端开发视频播放器Vue2024-12-03

【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

后端开发Vue3parcel-vue-cli2024-12-03
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯