博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5打造属于自己的视频播放器(逻辑篇)
阅读量:6914 次
发布时间:2019-06-27

本文共 558 字,大约阅读时间需要 1 分钟。

回顾

在上一章节之中,已经把HTML篇给大致样式显现了出来,接下来应该是JS篇了,可是在写之前有必要先整理一下思绪,盲目乱写是不对的,喝杯茶,撩撩妹,生活多美妙,写起代码来自然心情好思路正。

clipboard.png

初始化

1)设置好封面,一个好的小视频,自然封面非常给力,让人忍不住点击

下面就是一些不错的栗子
clipboard.png

clipboard.png

2)获取视频长度,一个友好的播放器,会给用户显示这个视频总共多少分钟

当然,您可以不用标注的太明显,但不能没有哦

播放

当点下播放的时候,世界将会改变。确实

1)播放按钮隐藏

2)下方控制条渐渐隐藏
3)视频开始播放

ps:排名不分先后 你321倒过来也行

播放中

在播放中会发生什么变化呢?

1)控制条进度条慢慢增长

2)当前播放时间变化

暂停 or 停止

在播放当中按暂停或者视频播放完毕时

0)时间定格(所指的是 video ui都静止,但不包括广告哟,哈哈,您可以尝试在播放按钮上放置一些诱人的广告)

clipboard.png

1)播放按钮显示

2)下方控制条显示

总结

1)在点击播放时,是播放按钮的点击事件,触发视频播放

而在点击暂停时,是视频的点击事件,触发按钮显示

2)在点击播放后,下方控制条渐渐隐藏时,却还没有完全隐藏的时候

但又点击了暂停,这时需要清除控制条的隐藏的状态,如下图

灵魂画师来袭

clipboard.png

3)哎呀我跌倒了,没有三五八万起不来clipboard.png

转载地址:http://meicl.baihongyu.com/

你可能感兴趣的文章
JavaScript数组操作方法集合(2)
查看>>
android Android SDK Manager遇到的问题
查看>>
RadioButton与监听
查看>>
Android开发技术周报183学习记录
查看>>
移位运算符
查看>>
warning: rpmts_HdrFromFdno: Header V3 RSA/SHA256 Signature, key ID fd431d51: NOKEY
查看>>
lamp环境安装
查看>>
springboot shiro配置
查看>>
Function
查看>>
Tomcat意外宕机分析
查看>>
LeetCode——58 Java之最后一个单词的长度
查看>>
ZetCode PyQt4 tutorial basic painting
查看>>
WPF RichTextBox的Document属性的序列化与反序列化
查看>>
显示照片方法之一
查看>>
InfoPath读取List到重复表
查看>>
微信公众平台二 文本编辑器与表单工具
查看>>
常用的php函数库
查看>>
迭代器 生成器
查看>>
初始Winsock编程
查看>>
jQuery实现表格拖动排序
查看>>