设为主页 | 加入收藏 | 联系我们
您当前的位置:首页 > 视频展示
分享一个基于HTML5实现的视频播放器
时间:2019-01-15 12:17:03  来源:本站  作者:

  最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃。最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦。

  hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo,全屏播放时还支持横屏播放。

  hivideo会自动把上面的video元素转换为hivideo播放器。我们还可以在video标签上设置播放属性:

  2.isrotate:全屏是否横屏播放,如果在手机端使用hivideo,我们可以设置该属性为true,表示全屏播放时横屏显示。

  如果是后期动态添加的video元素,也可以通过hivideo动态加载。例如页面动态添加了一个id为”player”的video元素,可通过如下方式把video转换为hivideo播放器:

  为了让播放器在各个浏览器下样式统一,首先要隐藏各个浏览器实现的样式。但一般我们通过浏览器开发工具查看不到播放器下的元素,因为这些元素都是阴影元素,它们是通过文档片段附加到video上,对于文档流是不可见的。

  这里我遇到一个费解的问题,把上面的样式通过合并的方式写是无效的,下面的写法不能隐藏掉阴影元素:

  隐藏浏览器阴影元素后就可以开始动手实现自己的控制条了。实现之前,我们得了解video提供的API。

  各个浏览器操作播放器提供的API名称一般都带有厂商前缀,所有基本上每一个API函数都对应多个版本,需要考虑兼容性。

  如果播放器全屏状态放生变化上面的事件就会触发。上面的事件我们只知道全屏状态发生变化,但不知道当前是进入全屏还是退出全屏。还需要结合全屏状态API。

  一般播放视频时都会显示视频总时长,触发loadedmetadata事件时元数据已经加载完成,所以可以在该事件中设置总时长的显示。

  有了上面列出的API,要实现自定义播放器就比较容易了,在自己实现播放器的过程中对应位置调用对应API即可。

  原理很简单,在全屏时播放器容器沾满了整个屏幕,我们可以给容器附加一个自定义样式,让容器旋转90度。

  旋转后的容器宽度和高度也要调整,需要把屏幕的高度screen.height赋给容器的宽度,而容器的高度设置为屏幕的宽度。这样就实现了全屏播放效果。下面是全屏播放控制的完整代码:

  如果本篇内容对大家有帮助,请点击页面右下角的关注。如果觉得不好,也欢迎拍砖。你们的评价就是博主的动力!下篇内容,敬请期待!


来顶一下
近回首页
返回首页
上一篇新闻:四种拍短视频的形式哪种更容易吸引用户?:短视频内参
下一篇新闻:HTML5 Video(视频)
现在评论本文
[!--temp.news_pl--]
热门排行榜
音乐专业术语 9533
营销网络 9433
新闻发布系统项目总结 9158
网络营销推广时应该注意的问题 9084
如何做好产品演示 8906
网站!网络销售的一些技巧? 8810
HTML5 Video(视频) 8716
投影展台报价 8715
视频展台 8623
浜у搧灞曠ず鍥剧墖澶у叏 8275
热门图文
热评新闻
・常用的音乐教学方法
・音乐专业术语
・360全景视频是什么意思?
・投影展台报价
・视频展台
・视频呼叫中心
・四种拍短视频的形式哪种更容易吸引用户?:短视
・分享一个基于HTML5实现的视频播放器
・HTML5 Video(视频)
关于我们 | 服务与支持 | 人才招聘 | 联系方式 | 网站地图 | 免责声明
Copyright © 2016-2019 Myshadu Corp. Ltd. All Rights Reserved
网站备案:皖ICP备06014805号bet体育在线客户端提供CDN内容加速服务 版权所有 bet体育在线客户端