文档章节

html5播放器的示例代码

子辛网站建设
 子辛网站建设
发布于 2017/09/03 11:51
字数 963
阅读 3
收藏 0

本次的分享是一个基于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 class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></div>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)
核心的控制部分已经说完了,有兴趣的同学可以去源码的html中点击播放,其中被迫有很多零碎的需求,比如点击暂停,保存音量等等。整个视频播放器的基础功能实现的还算完善。

以上就是本文的全部内容,希望对大家的学习有所帮助

本文转载自:http://www.mwebsite.cn/jishu/2875.html

共有 人打赏支持
子辛网站建设
粉丝 1
博文 11
码字总数 836
作品 0
宝山
CEO
sewise HTML5开源播放器的皮肤

sewise HTML5播放器是一款专业的免费开源的HTML5网页视频、流播放器,兼容Flash播放,它功能强大,体积小,跨平台,使用方便简洁、随心所欲。 sewise HTML5开源播放器皮肤可以自由定义,皮肤...

sewise
2014/05/22
0
0
网页音频播放器和视频播放器插件收藏

为了能够使网页展示内容更丰富,音频播放器和视频播放器是必不可少的,这里推荐几款。 10个基于Web的HTML5音乐播放器 15个最好的HTML5视频播放器 介绍当前流行的一些开源flash视频播放器 五个...

小微
2012/04/06
0
0
从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/28
0
0
分享一个老式卡带机风格的HTML5 Audio播放器实现

日期:2012-7-31 来源:GBin1.com 在线演示 本地下载 如果你不知道什么是卡带机的话,恭喜你,你真的非常太年轻,作为八,九十年代播放音乐必备的设备,对于我们这些70,80后的朋友来说会感觉...

gbin1
2012/07/31
0
3
html5视频播放器video player 选择

网上能找到的好的支持html5的视频播放器非常有限,研究了几个还可以的,发现都有这样或者那样的问题,不是不给源代码,就是不支持全屏播放,要么就是界面难看没有提供模板。 后来发现能用的也...

lilugirl
2012/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo分析之Transport层

前言 上一篇文章Dubbo分析之Serialize层,介绍了最底层的序列化/反序列化层,本文继续分析Serialize层的上一层transport网络传输层,此层使用了现有的一些通讯开源框架(ex:netty,mina,grizzl...

ksfzhaohui
30分钟前
2
0
通告!Android 9 Pie未适配应用公示

8月7日,谷歌正式发布Android 9 Pie,至今已两月有余。近日,华为终端开放实验室对国内主流应用在Android 9 Pie的兼容性进行测试,结果显示:目前TOP3000应用兼容率已经超过95%,但仍有少量应...

安卓绿色联盟
32分钟前
1
0
Linux下多网卡绑定模式详解

在我们日常Linux使用中,一般对于生产网都会使用双网卡或多网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可谓好处多多。而一般我们都会使用Linux操作系统下自带的网卡绑定模式。这...

openthings
33分钟前
3
0
SylixOS中AARCH64跳转表实现原理

1. 跳转表存在的意义 1.1 内核模块反汇编 如下的程序清单,为一个内核模块的源码。 #define __SYLIXOS_KERNEL#include <SylixOS.h>#include <module.h> /* * SylixOS call module_i......

zhywxyy
35分钟前
2
0
聊一聊 Spring 中的线程安全性

本文摘自ImportNew公众号,摘录做学习资料,向大家推荐该公众号 Spring与线程安全 Spring作为一个IOC/DI容器,帮助我们管理了许许多多的“bean”。但其实,Spring并没有保证这些对象的线程安...

木子SMZ
36分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部