HTML5本地视频播放器设计(+弹幕功能)

本文介绍了一个HTML5视频播放器的设计,包括播放器界面布局、播放/暂停按钮的CSS实现、进度条设计、时间显示、音量控制、全屏功能以及弹幕功能。弹幕使用canvas实现,通过监听键盘事件发送。文章还提到,实际上可以使用div代替canvas来优化弹幕性能。
摘要由CSDN通过智能技术生成

重点是设计html5播放器交互界面,滑动条,页面布局,简易弹幕
1.整体外观:
>_<
2.完整代码很长,所以不放了,之后上传。
3.
(1)首先是布局,通过居中的div控制整个区域居中,上边是video 下边是control块,再下方是弹幕输入框。理解position属性,将进度条、时间、音量区域、全屏区域通过css设定属性放在control块中。
(2)播放按钮是纯css制作,

.play{
    width: 25px;
    height: 25px;
    
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值