位置: IT常识 - 正文

video 自定义视频播放控件(videojs自定义按钮)

编辑:rootadmin
video 自定义视频播放控件

推荐整理分享video 自定义视频播放控件(videojs自定义按钮),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:video.js自定义样式,自定义video播放器,videojs自定义按钮,自定义video播放器,video自定义播放按钮,自定义video播放器,video自定义播放按钮,自定义video样式,内容如对您有帮助,希望把文章链接给更多的朋友!

ui设计的界面总是极具个性化的,要去修改插件中的视频控件的样式和布局太困难了,那就自己参照video原生事件,重写一个吧。

(效果图预览)

一、video标签的属性(props)

 html <video>标签 | 菜鸟教程

<video ref="videoPlayer" id="videoElement" controls autoplay :muted="isMute" width="800px" height="600px" > 您的浏览器不支持video</video>

参数说明:(更多属性参照上述菜鸟教程中的video标签)

controls:默认为true,即向用户展示视频控件(如播放、暂停按钮等)autoplay:如果出现该属性,则视频在就绪后马上播放。muted:是否静音,默认为truewidth:设置视频播放器的宽度二、video视频控件的触发事件 

video标签支持的多媒体事件(Media Events) | 菜鸟教程

<video ref="videoPlayer" id="videoElement" controls autoplay :muted="isMute" width="100%" height="100%" @loadeddata="setVideoPoster($event)" @progress="videoProgress($event)" @pause="videoPause($event)" @play="videoPlay($event)" @timeupdate="videoTimeUpdate()" @ended="videoEnded()" @contextmenu="contextmenu"> 您的浏览器不支持video</video><button @click="handlePlay">播放</button><button @click="handlePause">暂停</button><button @click="handleMute">切换静音</button><button @click="fullScreen">全屏</button>data(){ return{ isMute: true // 默认静音 }}1、播放(onplay事件)

this.$refs.videoPlayer.play();

methods:{ // 视频要开始播放时 videoPlay(e){ // ...触发该函数后视频会开始播放,我们可以做一些想做的事情,比如改变自定义播放按钮的样式等 }, // 自定义播放按钮中,触发视频的播放事件 handelPlay(){ this.$refs.videoPlayer.play(); // 会触发videoPlay()函数 }}2、暂停(onpause事件)

this.$refs.videoPlayer.pause();

methods:{ // 视频要暂停播放时 videoPause(e){ // ...触发该函数后视频会暂停播放 }, // 自定义播放按钮中,触发视频的播放事件 handelPause(){ this.$refs.videoPlayer.pause(); // 会触发videoPause()函数 }}3、静音(muted属性)

(1)切换静音

 // 手动切换静音(点击(非拖拽)静音时,用户选择的音量不变)

handleMute() {

video 自定义视频播放控件(videojs自定义按钮)

      this.isMute = !this.isMute;

},

(2)改变音量(volume属性)

this.$refs.videoPlayer.volume = a; (a为从 0~1的数字)

// 这里用element的进度条写音量大小调节条<el-slider v-model="curVolume" :show-tooltip="false" @input="changeVolume"></el-slider>data(){ return{ curVolume: 0, // 默认音量为0 }},methods:{ changeVolume(val){ this.curVolume = val; // 由于h5规定volum的值在0-1之间,所以这里要对获取到的val做一个处理(滑块的val是从0-100) this.$refs.videoPlayer.volume = val / 100; // 音量为0的时候,video控件为静音 if ( val == 0 ) { this.isMute = true; } else { this.isMute = false; } }}4、全屏fullScreen() { this.$refs.videoPlayer.webkitRequestFullScreen();},5、播放进度条

获取视频总时长(duration)

var videoObj = this.$refs.videoPlayer;

videoObj.addEventListener('canplay', () => {

        this.totalT = videoObj.duration;

})

获取视频加载进度

HTML5视频 - 加载百分比?

HTML5视频 - 加载百分比?

// 获取视频加载进度videoProgress(e){       var bf = this.$refs.videoPlayer.buffered;         var time = this.$refs.videoPlayer.currentTime;       if ( bf.length != 0 ){           var range = 0;           while( !( bf.start(range) <= time && time <= bf.end(range) ) ) {               range += 1;           }           var loadEndPercentage = ( bf.end(range) / this.playerVideo.duration ) * 100;  // 结束加载的百分比           this.persentLoad = loadEndPercentage;       }},

(1)父组件调用

<template> <video ref="videoPlayer" @progress="videoProgress($event)" @timeupdate="videoTimeUpdate()" > 您的浏览器不支持video </video> // 视频播放、加载进度条 <ProgressLine :presentT="presentT" :totalT="totalT" :persentLoad="persentLoad" @changeCurrentTime="changeCurrentTime($event)" @changeCurrentWord="changeCurrentWord($event)" > </ProgressLine> // 播放时长、视频总时长 <p> <span id="currentTime" ref="progressTimer">{{ videoCurrentTime }}</span> <span style="color: #ffffff;opacity: 0.3;">&nbsp;/&nbsp;</span> <span id="durationTime" ref="durationTimer">{{ videoTotalTime }}</span> </p></template>import ProgressLine from './ProgressLine.vue';export default { name: 'videoPage', components: { ProgressLine }, data(){ return{ presentT: 0, // 进度条的当前值,必须为number totalT: 0, // 进度条的最大值,必须为number persentLoad: 0, // 视频加载进度 videoCurrentTime: '00:00', // 当前视频已播放时长 videoTotalTime: '00:00', // 视频总时长 } }, methods:{ // 子组件传入的时间修改 changeCurrentTime(data) { this.$refs.videoPlayer.currentTime = data; // 点击进度条设置视频当前播放点 }, changeCurrentWord(data) { this.videoCurrentTime = this.formatTime(data); // 当前播放时间显示文字 }, // 获取视频加载进度 videoProgress(e){ var bf = this.playerVideo.buffered; var time = this.playerVideo.currentTime; if ( bf.length != 0 ){ var range = 0; while( !( bf.start(range) <= time && time <= bf.end(range) ) ) { range += 1; } var loadEndPercentage = ( bf.end(range) / this.playerVideo.duration ) * 100; // 结束加载的百分比 this.persentLoad = loadEndPercentage; } }, // 视频自动播放时 videoTimeUpdate(){ this.presentT = this.playerVideo.currentTime; // 获取当前播放时长 this.videoCurrentTime = this.formatTime(this.presentT); // 时间格式化 }, // 时间格式化 formatTime(t) { var m = parseInt(t % 3600 / 60) m = m < 10 ? '0' + m : m var s = parseInt(t % 60) s = s < 10 ? '0' + s : s return m + ':' + s }, }}

(2)进度条组件(播放进度条 和 加载进度条)

// ProgressLine.vue 进度条组件<template> <div> <div class="line-background"> <div class="time-line" @click="adjustProgress($event)"> <div class="progress-round" ref="progressRound"> <div class="loading" ref="persentLoad" style="width: 0;"></div> <!-- 加载进度条 --> <div class="progress" ref="progress" @click="adjustProgress"></div> <div class="round" ref="round" @mousedown="roundDrag"></div> </div> </div> </div> </div></template><script>export default { name: 'ProgressLine', props: { presentT: {}, totalT: {}, persentLoad: { default : 0 } }, data() { return { // 进度条拖拽 dragClick: false, // 鼠标/手指按下 clickDown: false, } }, created() { }, watch: { // 侦听当前播放时长设置进度条 presentT: { handler(newValue, oldValue) { // 未点击进度条 if (this.dragClick == false && this.clickDown == false) { this.$refs.progress.style.width = newValue / this.totalT * 100 + '%' if ((newValue / this.totalT * 100 - 1.23) < 0) { this.$refs.round.style.left = 0 + '%' } else { this.$refs.round.style.left = (newValue / this.totalT * 100) - 1.23 + '%' } } else if (this.dragClick == true) { this.dealWidth() this.dragClick = false } } }, persentLoad: { handler(newValue, oldValue) { this.$refs.persentLoad.style.width = ( newValue / 100 ) * 1300 + 'px'; } } }, methods: { progressData(data) { this.$emit('changeCurrentTime', data) this.$emit('changeCurrentWord', data) }, // 进度条位置和圆点定位处理 dealWidth() { this.$refs.progress.style.width = this.progressWidth / this.$refs.progressRound.offsetWidth * 100 + '%' if ((this.progressWidth / this.$refs.progressRound.offsetWidth * 100) - 1.23 < 0) { // 圆点定位 this.$refs.round.style.left = 0 + '%' } else { this.$refs.round.style.left = (this.progressWidth / this.$refs.progressRound.offsetWidth * 100) - 1.23 + '%' } }, // 进度条点击 adjustProgress(e) { this.dragClick = true e.preventDefault() const { left, width } = this.$refs.progressRound.getBoundingClientRect() // 进度条到屏幕距离及进度条的宽度 this.progressWidth = e.clientX - left if (this.progressWidth < 0) {//进度条边界值计算情况 this.progressWidth = 0 } else if (this.progressWidth >= width) { this.progressWidth = width } else { this.progressWidth = e.clientX - left // e.clientX:鼠标点击的位置到屏幕最左侧的距离 } this.dealWidth() this.progressData((this.progressWidth / width) * this.totalT) }, // 进度条圆点拖拽 roundDrag(event) { event.preventDefault() const offsetX = event.offsetX this.dragClick = true this.clickDown = true // 解决圆点拖拽进度条长度抖动 document.onmousemove = (e) => { // 给圆点添加移动事件 e.preventDefault()// 阻止进度条拖拽时屏幕原有的滑动功能 const X = e.clientX // 获取圆点离屏幕的距离 const { left, width } = this.$refs.progressRound.getBoundingClientRect() const ml = X - left // 进度条长度:圆点离屏幕的距离减去进度条最左边离屏幕的距离 if (ml <= 0) { // 进度条长度最小和最大值的界定 this.progressWidth = 0 } else if (ml >= width) { this.progressWidth = width } else { this.progressWidth = ml } this.progressData((this.progressWidth / width) * this.totalT) //视频播放时间 this.dealWidth() } // 抬起鼠标,结束移动事件 document.onmouseup = () => { document.onmousemove = null document.onmouseup = null this.clickDown = false } }, }}</script><style lang="less" scoped>.line-background { width: 100%; height: 10px; background-color: rgba(255, 255, 255, 0.3); .time-line { width: 100%; height: 10px; background-color: #565651; .progress-round { cursor: pointer; width: 100%; position: relative; display: flex; .loading { height: 10px; background-color: rgba(255, 255, 255, 0.3); } .progress { position: absolute; top: 0; left: 0; width: 00%; height: 10px; background-color: #3d7eff; } .round { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 16px; background: #ffffff; box-shadow: -2px 0px 2px 2px rgba(3, 0, 0, 0.30); } } }}</style>6、视频中禁用右键(可以禁止用户下载视频)// 在视频中禁用右键(禁止用户下载)contextmenu(e){ e.returnValue = false;},7、设置倍速播放

 this.$refs.videoPlayer.playbackRate = rate;   // rate 一般在[2.0,1.75,1.5,1.0,0.75,0.5]范围

本文链接地址:https://www.jiuchutong.com/zhishi/277613.html 转载请保留说明!

上一篇:Win10 19043.1237 9月累积更新 KB5005565推送(附更新修复+下载)

下一篇:苹果推送最新系统macOS Big Sur开发者预览版Beta 5(附推送内容)(苹果今天推送更新内容)

  • 所得税交错了怎么处理
  • 税务行政诉讼名词解释
  • 什么是消费税?特征有哪些
  • 老板故意拖欠税款怎么办
  • 个人所得税10月突然增加了
  • 公司交房租没有开票能记账?
  • 员工宿舍买热水器计入什么费用
  • 收到投资款怎么做账
  • 已入账未抵扣退回发票
  • 企业分立特殊性税务处理涉税
  • 公司注销时有大额应付款如何做账务处理合适?
  • 企业所得税季度申报
  • 建设期利息对当年的借款如何计息?
  • 出口货物索赔如何确认收入
  • 不征税收入税收政策
  • 装卸搬运费是否含税
  • 重新刻发票章需要什么资料
  • 修理厂专票怎么开
  • 高新企业研发投入后产出增加
  • 海关年检需要什么资料
  • 农产品增值税核定扣除管理建议
  • 个体户酒店服务业个税税率
  • 在建工程进项税可以抵扣吗
  • 商业承兑汇票分为哪两种
  • 旅客购买电子客票
  • 视同销售怎么做账务处理
  • 企业能公户往个人转账吗
  • 数字证书认证系统
  • PHP:Memcached::addServers()的用法_Memcached类
  • 有留抵税额怎么做分录
  • 本部借给分公司的钱用交印花税吗
  • 外国人在中国工作有五险一金吗
  • 安卓跑ubuntu
  • 企业长期资金的筹集方式
  • 下岗再就业有什么优惠政策
  • php生成随机6位数
  • gridviewcolumn
  • 增值税发票校验码在哪个位置
  • 关于商业承兑汇票的多选题有哪些
  • 【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布
  • php加密zend
  • phpcms怎么样
  • 图形验证码api
  • 购买方销项负数发票怎么抵扣
  • 金蝶可以自动结账吗
  • 财务报表审计的基础是独立性和专业性
  • sqlserver数据库版本号怎么查
  • 小规模企业免税收入会计分录
  • 收到厂家返利如何计算成本
  • 哪些项目的进项不含税
  • 水电费没有收到怎么处理
  • 税控盘的主要功能包括
  • 建账之前的业务怎么处理
  • 中标服务费可以税前扣除吗
  • 房租增值税专票税点
  • 进项税和销项税月末怎么结转
  • 企业一般户怎么查询
  • 待报解预算收入给我转了钱是什么意思
  • SQL里类似SPLIT的分割字符串函数
  • 虚拟机中的centos怎么联网
  • 2021图解
  • dos破解密码输入什么
  • linux telnet用法
  • Win10 Mobile 10586.306提前上手视频评测
  • Win8开启SmartScreen筛选器保护上网安全
  • win10软件报错
  • window批处理
  • html模板 js
  • jquery设置title
  • js表单事件有哪些
  • 在web项目中引入什么
  • Unity destructor Or OnDestory
  • python搭建网页
  • python正则函数
  • 英语流利说的简单介绍
  • 专用发票如何导出
  • 国家税务局扬州
  • 南京税务证明怎么打印
  • 余杭区税务局地址
  • 社保交五百多
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设