无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

h5小游戏免费模板_从零实现一个自定义html5播放器

时间:2020-12-25 11:29来源:h5小游戏免费模板 作者:jianzhan 点击:
从零完成一个自定html5播发器的实例编码 公布 此次的共享是一个根据HTML5标识完成的一个自定视頻播发器。在其中完成了播发中止、进展拖动、声音操纵及全屏幕等作用。实际效果
从零实现一个自定义html5播放器的示例代码   发布     本篇文章主要介绍了从零实现一个自定义html5播放器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。

效果预览

点我查看 。

核心思路

我相信一定会有些没有接触过制作自定义播放器的童鞋对于 标签的认识会停留在此。

 video controls= controls autoplay= autoplay 
 source src= movie.ogg type= video/ogg / 
 /video 

其中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(' div ')
 //添加loading动画
 setTimeout(ifState, 10)
setTimeout(ifState, 10)

核心的控制部分已经说完了,有兴趣的同学可以去源码的html中点击播放,其中被迫有很多零碎的需求,比如点击暂停,保存音量等等。整个视频播放器的基础功能实现的还算完善。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


本文为大家详细介绍下html5 音乐播放器 audio 标签的使用概述,喜欢html5的朋友可以参考下哈,希望对大家有所帮助

HTML5作品仿酷狗html5手机音乐播放器,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,感兴趣的朋友可以学习下哈

本篇文章主要介绍了HTML5网页音乐播放器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信