原生JS实现一个简易H5播放器

JavaScript025

原生JS实现一个简易H5播放器,第1张

以 B 站的播放页面为例，分析 H5 播放器常具备的功能：

该播放器容器内部包含两部分，分别是媒体播放区域和控件区域，其中控件浮动在容器的底部。

控件区域又由上方的进度条和下方的控件组构成。进度条可以包括两层 DIV，一层作为底部背景，一层位于背景之上，作为实际的进度显示。控件组的布局左边浮动 “播放/暂停” 按钮，“时长” 信息，右边浮动 “音量、“倍速”、“全屏” 按钮。

接下来就需要为各个控件按钮添加对应的事件行为

款很棒的 HTML5 视频播放器作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。2、SublimeVideoSublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。3、Open Standard Media (OSM) Player由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。4、Video for EverybodyVideo for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 视频解决方案 – 兼容所有主流浏览器，采用独特的 fallback 机制。6、FlareVideoFlareVideo 由 Alex MacCaw 开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持 HTML5 视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文