自定义HTML5播放器的示例代码

这种共享是一种基于HTML5标签的自定义视频播放器，它实现了播放、调度和拖动、音量控制和全屏播放的功能。

Effect preview

我查看源代码库。

核心理念

我相信会有一些儿童鞋没有接触到自定义播放器的标签。

在设置控件属性时，浏览器自己的控制栏将显示在界面中。如果UI不需要要求，内置控制器就已经满足大多数需求。当然，如果是这样的话，你就看不到这个份额。

隐藏控制条及仿真

如何实现一个自定义播放器的功能是控制的关键，我们不使用原来的，然后隐藏起来，通过HTML、CSS模拟的同一位置下所需的风格，同时通过JS调用视频标签暴露在接口功能和性能，用户界面和视频和用户检测模拟操作在数据同步播放相应的变化。

几个核心功能和属性的使用

myvid = document.getelementbyid（VIDEO1 ）；
视频切换控制
（myvid。玩） / /玩
（myvid。停顿） / /暂停
模拟视频
MyVid。时间= 5； / /返回或设置视频播放的当前位置
myvid.duration / /返回视频总长度
模拟视频卷
myvid.volume / /体积
当从加载切换到判断时，当前状态下获得视频回放。
myvid.readystate
/ / 0 = have_nothing -没有关于音频/视频的准备信息
/ / 1 = have_metadata -元数据的音频/视频准备
/ / 2 = have_current_data -当前播放位置的数据是可用的，但没有足够的数据来打下一架 /毫秒
/ / 3 = have_future_data -数据流和至少一架可
/ / 4 = have_enough_data可用的数据足以开始玩

在所有实现的关键点，更麻烦的是进度条的模拟。在视频标签的时间和时间属性的使用，以及进度条相对总长度的位置可以通过计算当前时间比总游戏时间。同时，对末端的长度由用户通过拖动进度条可以逆转，此时应扮演的视频位置。

拖放代码思想

核心代码示例
无功dragdis = 0
无功processwidth＝XXX /阻力—
$（'body）。Mousedown（function（e）{
e.clientx startx =
dragdis = startx - leftinit / / leftinit是在拉杆的起点的巨型屏幕左边的距离
DragTarget.css（{ / /拖动按钮
左：dragdis
}）
DragProcess.css（{ / /进度条（蓝条）
宽度：dragdis
在同一位置拖动按钮。
videosource.pause（）
}）。Mousemove（function（e）{ {）
Movex = e.clientx
disx = Movex - startx
VaR左= dragdis + disx
如果（左> processwidth）{
左= processwidth
}如果（左< 0）{
左= 0
}
DragTarget.css（{
左：左
}）
DragProcess.css（{
宽度：左
}）
}）。Mouseup（function（e）{ {）
VideoSource.play（）
videosource.currenttime = $（'蓝色'），Width（拖） / processwidth *时间/播放视频阻力计算后位置正确
}）

同样，音量的控制与行为基本相同。因此，在源代码中，作者判断卷和进度部分是否可以由不同的元素来判断，即拖动和控制进度或卷。

播放视频流状态控制前的负载动画

功能ifstate（）{
无功状态= videosource.readystate
如果（状态= 4）{状态4可以播放
视频播放器（）
{人}
$（'。发挥对称包装）删除（）。
$（'body）。追加（''）
添加动画加载
setTimeout（ifstate，10）
}
}
setTimeout（ifstate，10）

控制的核心部分已经完成。感兴趣的学生可以点击播放源代码中的HTML，这就需要有很多零碎的需求，如点击暂停、保存音量等，整个视频播放器的基本功能是完美的。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。