php文件流播放拖动,自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器...
这次给大家带来自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器,自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器的注意事项有哪些,下面就是实战案例,一起来看一下。
本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。
效果预览
点我查看 源码仓库 。
核心思路
我相信一定会有些没有接触过制作自定义播放器的童鞋对于 标签的认识会停留在此。
其中controls属性经过设定,会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求,其内置控制器已经可以满足大部分的需求。当然了如果是这样你们也不会看到这篇分享了=。=
隐藏控制条并模拟
那么实现一个自定义功能的播放器关键就在于,我们不使用原生的控制器,将其隐藏掉之后,在下方同样的位置通过html、css来模拟所需样式,同时通过js来调用vedio标签所暴露给我们的接口函数及属性,以及检测用户的操作行为来同步的模拟UI与视频播放数据的相应变化。
几个核心函数及属性的用法myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
在所有实现中的关键点,较为繁琐的是对于进度条的模拟。其中使用了video标签中的currentTime以及duration属性,通过当前播放时间与总播放时间的比值,就可以计算出进度条相对于总长的位置。同时用户通过拖拽进度条所最后设置的长度也可以用来反向推算出此时视频应该播放的位置。
拖拽代码思路//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
startX = e.clientX
dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
dragTarget.css({ //拖拽按钮
left: dragDis
})
dragProcess.css({ //进度条(蓝色进度条)
width: dragDis
}) // 令进度条和拖拽按钮渲染在同一位置
videoSource.pause()
}).mousemove(function(e) {
moveX = e.clientX
disX = moveX - startX
var left = dragDis + disX
if(left > processWidth) {
left = processWidth
} else if(left < 0) {
left = 0
}
dragTarget.css({
left: left
})
dragProcess.css({
width: left
})
}).mouseup(function(e) {
videoSource.play()
videoSource.currentTime = $('蓝色拖拽条').width() / processWidth * duration //拖拽后计算视频的正确播放位置
})
同理音量的控制与其上行为基本一致,故在源码中作者将音量与进度部分通过不同元素进行判断是进行进度还是音量的拖拽控制。
通过查询视频流状态控制播放前的加载动画function ifState() {
var state = videoSource.readyState
if(state === 4) { //状态为4即可播放
videoPlayer()
} else {
$('.play-sym-wrapper').remove()
$('body').append('
')
//添加loading动画
setTimeout(ifState, 10)
}
}
setTimeout(ifState, 10)
核心的控制部分已经说完了,有兴趣的同学可以去源码的html中点击播放,其中被迫有很多零碎的需求,比如点击暂停,保存音量等等。整个视频播放器的基础功能实现的还算完善。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php文件流播放拖动,自定义实现可以播放暂停、进度拖拽、音量控制及全屏的H5播放器...相关推荐
- android 播放器封装,Android视频播放最全总结:MediaPlayer+TextureView封装一个完美实现全屏、小窗视频播放器,附项目源码...
原标题:Android视频播放最全总结:MediaPlayer+TextureView封装一个完美实现全屏.小窗视频播放器,附项目源码 作者:xiaoyanger 来源:http://www.jian ...
- 鸿蒙视频播放器可以播放暂停重播拖拽
鸿蒙系统HarmonyOS,今天来写一个视频播放器. 官方给的例子比较简单. 官方示例参考 鸿蒙OS 视频播放开发指导_w3cschool 本例可以实现视频播放.暂停.重播.画面显示.拖拽视频进度. ...
- android实现多画面播放,可无缝切换小窗/全屏的android播放器实现
效果: 普通模式多画面 / 全屏播放 小窗模式 布局和拖拽功能介绍 普通窗口下的视图层级关系 将AutoMonitorPlayer作为控件时,layout图层关系如上图.AutoMonitorPlay ...
- dplayer js控制 自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...
- WebView 视频播放,全屏按钮显示不出来,全屏后不能播放视频
最近项目的一个需求,需要在Webview 里面播放视频遇到了一些问题: 视频可以正常播放但是,视频底部的全屏按钮没了,只有一个音量按钮.修改后,点击全屏,视频不能播放. 接下来一 一解决: 问题1 : ...
- audio标签的播放、暂停、重播、进度拖拽等操作
前言 最近在做题库项目的时候,需要对听力题进行手动控制等一系列操作,其中最主要的用到的一些方法就是loadeddata.timeupdate.ended等,次功能花了不少时间,此文仅作记录,不喜勿喷, ...
- 腾讯X5内核使用详解(X5内核播放器使用如何去除控制栏全屏播放)以及一些注意事项...
例子下载地址 https://www.lanzous.com/i2zsv5g GIT就不用了麻烦的不行 本人安卓刚学 就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...
- html实现拖拽自定义表单,自定义表单(二)--拖拽(HTML版本)
系列文章 自定义表单(一)--拖拽(JS版本) 自定义表单(二)--拖拽(HTML版本) 自定义表单(完)--(html5版本) 一.瞎扯 最近在折腾人工智能,今天写了段tensorflow,用来分辨 ...
- EasyPlayer客户demo点击全屏无法实现播放器的全屏调整优化
EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据流的播放速度以及画质的解码显示上均做了大 ...
- java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
最新文章
- CS Tip 16: 利用注释
- 腾讯云TDSQL-A发布公有云版本 支持第七次全国人口普查等海量数据场景
- 23 张图详解路由协议:计算机网络的核心技术
- 和jwt_秒懂 JWT
- VS C++生成dll和静态调用dll的方法
- 2020-2021年度第二届全国大学生算法设计与编程挑战赛 (秋季赛)-正式赛-详细题解
- [html] iframe可以使用父页面中的资源吗(如:css、js等)?
- 使用xorm工具,根据数据库自动生成 go 代码
- git rev-parse 和 git cat-file
- 使用WPF设计类似Visio的简单绘图软件
- 若计算机系统有120个终端,概率论答案 - 李贤平版 - 第五章
- 60906磁悬浮动力系统应用研究与模型搭建
- python的Bio下的Entrez使用
- 调研分析-全球与中国工业电源插头和插座市场现状及未来发展趋势
- android文档在线批注,文档批注
- 2022年西式面点师(初级)考试题库及模拟考试
- 【基于Java语言的Android个人开发笔记,开屏引导页】利用ViewPagerFragment实现引导页
- php实现的简单问卷调查系统
- RTK ST5113-53 3kN 220VAC
- Android—传感器-方向传感器