网页播放器(如DPlayer)播放器H5页面实现视频全屏播放滑动操作(滑动快进,滑动音量增减)
官方文档:https://dplayer.diygod.dev/zh/guide.html#%E5%8F%82%E6%95%B0
- abort 视频终止加载
- canplay 提示该视频已准备好开始播放
- canplaythrough 提示视频能够不停顿地一直播放:
- durationchange 视频的时长已改变
- emptied 重置为初始状态下触发
- ended 视频播放结束后触发
- error 获得视频的错误状态:
- loadeddata 视频加载完后才出现
- loadedmetadata 提示音频的元数据已加载:
- loadstart 提示视频已开始加载:
- mozaudioavailable 当音频数据缓存并交给音频层处理时
- pause 事件在音频/视频(audio/video)暂停时触发。
- play 事件在音频/视频(audio/video)开始播放时触发。
- playing 事件在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发。
- progress 浏览器正在下载指定的音频/视频时,会发生 progress 事件
- ratechange 事件在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式)。
该事件通过音频/视频(audio/video)的playbackRate属性调用,用于设置或返回音频/视频(audio/video)的播放速度。 - seeked 事件在用户已移动/跳跃到音频/视频(audio/video)中的新位置时触发。
- seeking 事件在用户开始移动/跳跃到新的音频/视频(audio/video)播放位置时触发。
**提示:**seeking 事件的相反事件为seeked事件。
**提示:**使用 Audio/Video 对象的currentTime属性获取播放位置。 - stalled 事件在浏览器尝试获取媒体数据,但数据不可用时触发。
- suspend 事件在浏览器刻意不加载媒体数据时触发。
- timeupdate 事件在音频/视频(audio/video)的播放位置发生改变时触发。
该事件可以在以下情况被调用: 1播放音频/视频(audio/video) 2移动音频/视频(audio/video)播放位置
**提示:**timeupdate 事件通常与 Audio/Video 对象的currentTime属性一起使用,该属性返回音频/视频(audio/video)的播放位置(以秒计) - volumechange 事件在音频/视频(audio/video)的音量发生改变时触发。
- waiting 事件在视频由于需要缓冲下一帧而停止时触发。
duration:是视频时长
player.on('fullscreen', function() { $("body").on("touchstart", function(e) { //e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $("body").on("touchmove", function(e) { //e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { //表示向右滑动 var currentTime=window.player.video.currentTime currentTime=currentTime+10; if (duration>0 && currentTime>duration) { currentTime=duration; return; } player.seek(currentTime) // console.log(Math.abs(X)-Math.abs(Y)); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { //表示向左滑动 var currentTime=window.player.video.currentTime currentTime=currentTime-10; if (currentTime<0) { currentTime=0; return; } //console.log(currentTime); window.player.seek(currentTime); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { //表示向下滑动 volume=volume-0.01 if (volume<0) { volume=0; return; } //console.log( Math.abs(Y)-Math.abs(X)); player.volume(volume, true, false); } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { //表示向上滑动 volume=volume+0.01 if (volume>100) { volume=100; return; } player.volume(volume, true, false); } }); }); player.on('fullscreen_cancel', function() { $("body").unbind("touchstart"); $("body").unbind("touchmove"); $("body").unbind("click"); });
简单来说就是全屏(也可以是播放器所在div)的事件监听滑动操作(理论上网页播放器只要有对应的音量调整、视频指定点播放、获取当前播放时间都可以使用),具体需求可以根据自己的来
-----------------------有任何问题可以在评论区评论,也可以私信我,我看到的话会进行回复,欢迎大家指教------------------------
(蓝奏云官网有些地址失效了,需要把请求地址lanzous改成lanzoux才可以)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2022-01-07 谷歌浏览器访问报错: in more-private address space `local`.