video 元素自定义 controls 控件以及常用事件、方法

video 元素自定义 controls 控件以及常用事件

属性参考
隐藏控件
隐藏播放器右下角三个点
自定义播放速度
阻止默认的全屏和暂停
自定义全屏播放
常用事件
常用属性和方法

<videoid="video"src="@/assets/test.mp4"autoplaymutedcontrolscontrolsList="nodownload"
>您的浏览器不支持 video 标签。</video>

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性参考

隐藏控件

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在 css 中设置相关属性把它隐藏掉即可。

// 全屏按钮
video::-webkit-media-controls-fullscreen-button {display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {display: none;
}
//进度条
video::-webkit-media-controls-timeline {display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {display: none;
}
// 画中画
video::-webkit-media-controls-toggle-closed-captions-button {display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {display: none;
}
//所有控件
video::-webkit-media-controls-enclosure {display: none;
}

隐藏播放器右下角三个点

右下角的三个点，里面包含下载和画中画，最新版谷歌浏览器还新增了播放速度按钮。

去除的方法是给 video 元素设置属性 controlsList="nodownload noplaybackrate" 以及属性 disablepictureinpicture。只有下载、画中画和播放速度全部隐藏右下角的三个点才会消失。

自定义播放速度

通过 video 的 playbackRate 属性自定义播放速度。

// 获取video节点
const video = this.$refs.videoPlayback;video.playbackRate = 4; // 4 倍速播放

阻止默认的全屏和暂停

video 加上 controls 属性后默认双击屏幕全屏显示、单击屏幕暂停和开始播放视频。可以通过禁止 click 事件的默认行为来阻止这两种行为，给 video 原素加上 @click.prevent="() => {}"即可。

或者：

const video= document.getElementById("video");video.addEventListener("click", () => {// 阻止视频默认点击事件event.preventDefault()
}, false);

自定义全屏播放

// 全屏播放
function fullscreenFun() {const ele = document.getElementById('video');if (ele.requestFullscreen) {ele.requestFullscreen();} else if (ele.mozRequestFullScreen) {ele.mozRequestFullScreen();} else if (ele.webkitRequestFullScreen) {ele.webkitRequestFullScreen();}
}

requestFullscreen 等 API 的用法参考 MDN

常用事件

const video = document.getElementById('video')// 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
video.addEventListener('loadstart', function(e) {console.log('提示视频的元数据已加载')console.log(e)console.log(video.duration)            // NaN
})// 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
video.addEventListener('durationchange', function(e) {console.log('提示视频的时长已改变')console.log(e)console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）
})// 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
video.addEventListener('loadedmetadata', function(e) {console.log('提示视频的元数据已加载')console.log(e)
})// 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
video.addEventListener('loadeddata', function(e) {console.log('提示当前帧的数据是可用的')console.log(e)
})// 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
video.addEventListener('progress', function(e) {console.log('提示视频正在下载中')console.log(e)
})// 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
video.addEventListener('canplay', function(e) {console.log('提示该视频已准备好开始播放')console.log(e)
})// 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
video.addEventListener('canplaythrough', function(e) {console.log('提示视频能够不停顿地一直播放')console.log(e)
})// 8、play：播放监听
video.addEventListener('play', function(e) {console.log('提示该视频正在播放中')console.log(e)
})// 9、pause：暂停监听
video.addEventListener('pause', function(e) {console.log('暂停播放')console.log(e)
})// 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
video.addEventListener('seeking', function(e) {console.log('开始移动进度条')console.log(e)
})// 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
video.addEventListener('seeked', function(e) {console.log('进度条已经移动到了新的位置')console.log(e)
})// 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
video.addEventListener('waiting', function(e) {console.log('视频加载等待')console.log(e)
})// 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
video.addEventListener('playing', function(e) {console.log('playing')console.log(e)
})// 14、timeupdate：目前的播放位置已更改时，播放时间更新
video.addEventListener('timeupdate', function(e) {console.log('timeupdate')console.log(e)
})// 15、ended：播放结束
video.addEventListener('ended', function(e) {console.log('视频播放完了')console.log(e)
})// 16、error：播放错误
video.addEventListener('error', function(e) {console.log('视频出错了')console.log(e)
})// 17、volumechange：当音量更改时
video.addEventListener('volumechange', function(e) {console.log('volumechange')console.log(e)
})// 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
video.addEventListener('stalled', function(e) {console.log('stalled')console.log(e)
})// 19、ratechange：当视频的播放速度已更改时
video.addEventListener('ratechange', function(e) {console.log('ratechange')console.log(e)
})

常用属性和方法

const video = document.getElementById('video');// 暂停、播放
video.play()
video.pause()// 静音
video.muted = true
video.muted = false// 切换视频
video.src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
video.load()

video 元素自定义 controls 控件以及常用事件、方法相关推荐

js在控件原有的事件方法中加入自己的方法
有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...
scenebuilder各控件属性介绍_C#控件及常用设计整理（三）
C#控件及常用设计整理(三) 12.CheckedListBox 控件 CheckedListBox控件又称复选列表框,它扩展了ListBox控件,它几乎能完成列表框可以完成的所有任务,并且还可以在列 ...
C#常用控件的属性以及方法（转载）
-----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...
C#控件及常用属性整理
C#控件一览表前所未有的震撼(太详细了) 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来 ...
C# 常用控件及单击事件
1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2)WindowState属性: 用来获取或设置窗体的窗口状态. 取值有三种: ...
C#_C#控件及常用设计整理
简介摘要: 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗体的窗口状态. 取 ...
C#控件及常用设计整
1.窗体... 1 2.Label 控件... 3 3.TextBox 控件... 4 4.RichTextBox控件... 5 5.NumericUpDown 控件... 7 6.Button 控件 ...
asp.net panel 加html,ASP.NET 页面中动态增加的控件、添加事件
要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在R ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...