HTML5本地视频播放器设计（+弹幕功能）

重点是设计html5播放器交互界面，滑动条，页面布局，简易弹幕
1.整体外观：

2.完整代码很长，所以不放了，之后上传。
3.
（1）首先是布局，通过居中的div控制整个区域居中，上边是video 下边是control块，再下方是弹幕输入框。理解position属性，将进度条、时间、音量区域、全屏区域通过css设定属性放在control块中。
（2）播放按钮是纯css制作，

.play{width: 25px;height: 25px;position: relative;top: 7.5px;left: 20px;display: inline-block;
}
.play:before{border: 12.5px solid transparent;border-left: 12.5px solid #000;content: "";position: absolute;left:6.25px;
}

利用css的一个技巧，设定border得到播放图标。
暂停图标也是css制作，但是不是利用border，是利用：before，：after 设定高宽背景色得到。
（3）进度条是参考了网易云音乐的音乐进度条设计的，由此学到了巧妙使用position-image属性，可以快速实现很多很棒的效果。注意背景图像的定位是关键，也可以在伪类中改变背景图片位置，从而改变图标。（背景图片上面有很多图标，通过限制区域大小以及背景图片位置来达到修改显示的图标效果）。
进度条其实是三个颜色，我使用了两个，没有考虑预加载。通过进度修改红色进度条长度。
另外，可以点击改变进度，但不可以拖动。拖动功能在音量条进行了实现，实现方法见另一个文章。
（4）时间的实现：
duration属性得到视频总长，通过自己写的secondToMinute（）转换成00：00形式输出。再得到当前时间显示。
（5）音量：
通过display属性设定音量条的显示与消失。
（6）全屏函数：
点击全屏，注意不同的浏览器全屏函数基本都不同，参考网上的总结进行了兼容性写法。
（7）弹幕实现，通过在video上方铺一个运动的canvas实现弹幕效果。下方input中输入后，回车或者按下button即可发送，回车方式比较简单，监控e.keyCode ，实际开发过程遇到回车就会页面刷新，这是因为表单默认都是要返回本页面，需要在form中设定 ousubmit=”return false;” 这样就可以解决。
关于canvas线性运动，是通过给新建立的canvas一个写好的className,在其中已经写好动画效果。
实际还遇到了canvas内部文字混乱问题，文字大小设定失效，完全与canvas大小相关，最后也不知道怎么解决。最后canvas可以显示的文字为8个左右，超出就隐藏。不过基本的弹幕功能完美实现了。
写了好几天的代码，完成了很开心。

后记：
写完文章之后，突然想到一个点子，canvas性能不好，为什么不能用div呢，只要把背景色设定为transparent,应该可以。然后测试了一下，效果超级好！！一直在想大的视频网站弹幕用什么做呢，现在觉得就是div啊，思路被影响了，其实就是一个透明属性就可以解决的问题。

总结：2017/10/9
这是我以前写的一个H5播放器，很多错误，比如弹幕可以使用div而不是canvas,div本身镂空，背景色不需要处理；滑动条有一些问题，全局定位没必要用那么多绝对定位。

HTML5本地视频播放器设计（+弹幕功能）相关推荐

python在tk界面播放本地视频_tkinter做一个本地视频播放器(2)——弹幕
前文我们已经完成了一个集暂停.倍速.显示进度条功能为一体的视频播放器,今天我们再来增加一个新的功能--发送弹幕. tkinter播放视频的原理,就是读取每一帧的图片,然后刷新画布.所以如果想实现弹幕功 ...
Android本地视频播放器开发--视频解码
在上一章Android本地视频播放器开发--SDL编译编译中编译出sdl的支持库,当时我们使用的2.0,但是有些api被更改了,所以在以下的使用者中我们使用SDL1.3的库,这个库我会传上源码以及编译 ...
linux下qt实现vlc视频播放器,Qt封装本地视频播放器（VLC二次开发）
Qt本地视频播放器 1.使用vlc官方sdk封装,并在QLabel上面播放 2.首先到vlc官网下载vlc的sdk环境,下载地址:http://download.videolan.org/pub/vi ...
android 编译 sdl,SDL编译 - Android本地视频播放器开发_Linux编程_Linux公社-Linux系统门户网站...
在上一章 Android本地视频播放器开发--ffmpeg解码视频文件中的音频(2)[http://www.linuxidc.com/Linux/2013-06/85955p5.htm]中使用Ope ...
基于Django框架的视频播放器设计
基于Django框架的视频播放器设计前言一.简介二.详细实现步骤 1.路由配置 2.后台代码设计(对云盘接口的访问) 3.后台代码设计(流式视频传输) 4.前端功能设计(视频播放列表) 5.前端 ...
[日常笔记] 2: 本地视频播放器 MPV
这篇文章记录本地视频播放器 MPV player 相关信息官网:https://mpv.io/ 这是一款免费的开源的跨平台的视频播放软件安装部分 ------------------------- ...
PotPlayer 1.7.20977 多语言版本 64位和32位，本地视频播放器的最佳不二之选
PotPlayer播放器中文版具有DXVA硬件解码以及多线程解码功能,使您能更流畅的观看高清影片.PotPlayer体积小巧.界面简洁.功能强大,没有任何广告和垃圾信息,是本地视频播放器的最佳不二之选 ...
基于Qt、FFMpeg的音视频播放器设计一
前言:整个项目的源代码 https://download.csdn.net/download/hfuu1504011020/10672140 最近刚完成基于Qt.FFMpeg的音视频播放器相关C++程 ...
Android本地视频播放器开发--SDL编译
在上一章 Android本地视频播放器开发--ffmpeg解码视频文件中的音频(2)中使用OpenSL ES来播放视频的声音,遗留的问题是声音的不同步,由于视频实现部分也要同步,而且音视频也要同步,所 ...

HTML5本地视频播放器设计（+弹幕功能）

HTML5本地视频播放器设计（+弹幕功能）相关推荐

最新文章

热门文章