Advertisement
  1. Code
  2. HTML5

15个最佳 HTML5 视频播放器

by
Read Time:10 minsLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

随着最近 YouTube 改变政策要求创作者在获得广告收入之前达到 10,000 次观看,我们看到了 YouTube 黄金时代的落幕。 现在比以往任何时候都更需要创意人员开发自己的视频平台并销售他们自己的广告。

无论你是 YouTube 创作者还是有抱负的电影导演,这 15 个最佳 HTML5 视频播放器都将帮助你开始开发以视频为中心的网站。 你最需要什么功能?

  • 一个简单的播放器?
  • 强大的播放列表选项?
  • 视频之前,期间或之后的广告?
  • 将自托管视频与来自 YouTube 和 Vimeo 的视频混合起来怎么样?

在 Envato Market 上最好的 HTML5 视频播放器中,你一定会找到你想要的内容:

1. 精英视频播放器

Elite Video Player 是一款出色的 HTML5 视频播放器,可以处理你抛出的任何内容:

  • 自托管 mp4
  • YouTube
  • Vimeo
  • Dropbox
  • 亚马逊 s3
  • 和 Google 云端硬盘

使用可完全自定义的 HTML5 视频播放器,在所有浏览器和设备上显示风格的视频。

Elite Video PlayerElite Video PlayerElite Video Player

功能还包括:

  • 灯箱,响应和全屏模式
  • YouTube 频道和播放列表支持
  • 选择播放器和滚动条效果
  • 可调整高度和宽度
  • 还有更多选择

Elite Video Player 为屏幕带来的更独特和吸引人的功能之一是能够添加前贴片广告,视频插播广告和后贴片广告。 一个 WordPress 版本也已经随之推出。

2. 带有 YouTube,Vimeo,HTML5,广告的终极视频播放器

使用带有 YouTube,Vimeo,HTML5,广告的终极视频播放器,在视频之前,期间或之后添加你自己的视频或弹出式广告。

显示来自 YouTube,Vimeo 和自托管 mp4 的视频(通过 Amazon S3,Google Drive 等)。

Ultimate Video Player with YouTube Vimeo HTML5 AdsUltimate Video Player with YouTube Vimeo HTML5 AdsUltimate Video Player with YouTube Vimeo HTML5 Ads

功能包括:

  • 完全响应并得到所有浏览器的支持
  • 支持同一页面上的多个实例
  • 时间和数量的工具提示
  • 字体和图标
  • 倒带功能
  • 还有更多

带有 YouTube,Vimeo,HTML5,广告(也可用于 WordPress)的终极视频播放器还为你提供了通过社交媒体和嵌入代码共享视频的选项,使访问者能够将你的播放器嵌入其网站。

3. HTML5 响应式视频播放器和广告

如果不提及 HTML5 响应式视频播放器和广告,你就无法谈论 HTML5 视频播放器。

你可以在精选视频开始之前集成视频广告,也可以在播放期间设置弹出广告。 这些只是众多选项中的两个。

HTML5 Responsive Video Player AdvertisingHTML5 Responsive Video Player AdvertisingHTML5 Responsive Video Player Advertising
  • 自动隐藏,自动播放和自动重播选项
  • 通过 CSS 完全响应和自定义
  • 工具提示控制信息和倒带
  • 可选的社交媒体分享
  • 以及更多

HTML5 响应式视频播放器和广告包括你在更强大的 HTML5 视频播放器中找到的所有功能 - 同时为你提供在视频屏幕的角落显示你的徽标的附加选项。

4. 带有 YouTube,Vimeo,HTML5,广告的超视频库

带有 YouTube,Vimeo,HTML5,Ads 的 Ultra Video Gallery 是一款支持和维护良好的 HTML5 视频播放器。

它具有你在视频播放器中所需的所有功能和选项 - 然后是一些。

Ultra Video Gallery with Youtube Vimeo HTML5 AdsUltra Video Gallery with Youtube Vimeo HTML5 AdsUltra Video Gallery with Youtube Vimeo HTML5 Ads

功能包括但不限于:

  • YouTube 和 Vimeo 托管视频的自定义播放器设计
  • 适用于 YouTube,Vimeo 和自托管视频的前贴片广告
  • 触摸和键盘 / 鼠标支持
  • 易于设置和完全可定制
  • 包括 8 个预先设计的主题
  • 还有更多

带有 YouTube,Vimeo,HTML5 的 Ultra Video Gallery,广告可以作为独立播放器使用,也可以在精选视频的右侧或底部添加图库。

5. 终极视频播放器

这款 HTML5 视频播放器包含了最先进播放器所需的所有基础知识,而不会丢失那些使用过时浏览器的用户。

终极视频播放器可以使用具有 Flash 后备功能的 IE8 在最新的移动浏览器或旧桌面计算机上播放视频。

Ultimate Video PlayerUltimate Video PlayerUltimate Video Player

这也是功能:

“拥有大量功能,如响应式布局,多个播放列表,外部 API,可选的深层链接,灵活的皮肤,嵌入和共享,Facebook 共享等......”

设置播放列表,提供视频下载按钮,以及更多的终极视频播放器(也有 WordPress)。

6. 带有实时播放列表的 HTML5 视频库

使用带有实时播放列表的 HTML5 视频库构建强大的视频展示。 使用 HTML 标记,XML 播放列表设置你的实时播放列表,或者它可以读取自托管视频的文件夹。

你还可以混合使用 YouTube 和自托管的 mp4 视频。

HTML5 Video Gallery with Live PlaylistHTML5 Video Gallery with Live PlaylistHTML5 Video Gallery with Live Playlist

其他功能包括:

  • 与 jQuery 地址的深层链接
  • YouTube API v3 支持
  • 视频宽高比
  • 实时预览

公共 API 可用:播放 / 暂停,下一个 / 上一个,搜索等等!

使用带有实时播放列表的 HTML5 视频库,将你喜爱的许多 YouTube 播放器功能带到你自己的网站。

7. 响应式 HTML5 视频播放器和图库

响应式 HTML5 视频播放器和图库易于设置,视网膜准备就绪,并包含多个皮肤,可用于外观精美的 HTML5 视频播放器。

“你可以使用没有图库的播放器只有一个视频,或者你可以使用缩略图,标题和描述建立你自己的画廊。”

你还可以在左下角,右下角或左上角添加自己的徽标。

Responsive HTML5 Video Player GalleryResponsive HTML5 Video Player GalleryResponsive HTML5 Video Player Gallery

其他功能包括:

  • 可选的共享菜单和嵌入代码
  • 单击并拖动图库支持
  • 完整的玩家控制
  • 和更多

该响应 HTML5 视频播放器和画廊是建立在一个精简的画廊格式显示你的影片的最佳方式。

8. 响应式视频库 HTML5 YouTube Vimeo

使用自适应视频库 HTML5 YouTube Vimeo 轻松将 Vimeo,YouTube 和自托管 mp4 视频混合到一个播放列表中。

Responsive Video Gallery HTML5 YouTube VimeoResponsive Video Gallery HTML5 YouTube VimeoResponsive Video Gallery HTML5 YouTube Vimeo

你会发现各种有用的功能:

  • 使用 jQuery 地址进行可选的深层链接
  • HTML,XML 和基于文件夹的播放列表
  • 支持 YouTube 和 Vimeo API v3
  • 播放前后的可选广告
  • 强大的播放选项
  • 以及更多

自适应视频库 HTML5 YouTube Vimeo 包含一个可靠的 API,以及你在 HTML5 视频播放器中所需的一切。

9. 通用视频播放器 - YouTube / Vimeo / 自托管

通用视频播放器 --YouTube / Vimeo / Self-Hosted 是另一款值得你关注的 HTML5 视频播放器。

它不仅具有其他视频播放器中包含的许多功能,而且还包括一些将其区分开来的附加功能。

Universal Video Player - YouTubeVimeoSelf-HostedUniversal Video Player - YouTubeVimeoSelf-HostedUniversal Video Player - YouTubeVimeoSelf-Hosted

突出的功能包括:

  • Google Analytics 跟踪
  • 播放列表搜索
  • 类别
  • 拖曳

与其他一些 HTML5 视频播放器一样,它包括 YouTube,Vimeo 和自托管视频支持,可自定义的配色方案以及下载视频的选项。

该通用视频播放器 - 的 YouTube / Vimeo 的 / 自托管是一个很好的解决方案,甚至可以自动检索视频缩略图,标题,并从 YouTube 服务器描述(WordPress 版本可用)。

10. 带有播放列表和多个皮肤的 HTML5 视频播放器

带有播放列表和多个皮肤的 HTML5 视频播放器(也可用于 WordPress)提供侧面和底部播放列表以及六种不同的皮肤以匹配你的网站。

与许多其他 HTML5 视频播放器不同,除了标准的 mp4 视频格式外,此 gem 还支持 webm 视频文件。

HTML5 Video Player with Playlist Multiple SkinsHTML5 Video Player with Playlist Multiple SkinsHTML5 Video Player with Playlist Multiple Skins

你还会发现:

  • 支持 HTML 和 CSS 的可选视频说明
  • 支持单个和多个实例
  • 用于播放控件的自动隐藏
  • 点击监听器
  • 和更多

带播放列表和多个皮肤的 HTML5 视频播放器是一个很好的 HTML5 视频播放器,适用于播放列表,包含视频和播放列表的可定义预览图像。

11. 视频播放器总数

你很难找到一个提供这么多价值的 HTML5 视频播放器。

Total Video Player 有很多选项,甚至包括对自托管视频(srt / vtt)的字幕和字幕支持。

Total Video PlayerTotal Video PlayerTotal Video Player

其他功能包括:

  • 混合 YouTube 和自托管的 mp4 视频
  • 旧版浏览器的 Flash 后备版
  • 可选的播放控件
  • 可选的视频信息
  • 公共 API 和回调
  • 更多

在总视频播放器是一个总的视频播放器。

12. HTML5 视频播放器和全屏视频背景

HTML5 视频播放器和全屏幕视频背景不仅可以制作出色的 HTML5 视频播放器,还可以设置全屏视频背景。

你的网络开发工具带中是否需要视频播放器?

这就是你要找的东西。

HTML5 Video Player FullScreen Video BackgroundHTML5 Video Player FullScreen Video BackgroundHTML5 Video Player FullScreen Video Background

这有许多有用的功能,包括:

  • 不支持 FullScreen 视频背景的移动设备的后备图像
  • 30 多种 Js 选项:播放器控制,播放,设计等。
  • 支持 YouTube,Vimeo 和自托管视频
  • 导航定位
  • 视频纹理
  • 更多!

HTML5 视频播放器和全屏视频背景是任何 Web 开发人员工具箱的受欢迎的补充 - 它也在 WordPress 中!

13. ProgressionPlayer - 响应式音频 / 视频播放器

如果你正在寻找一款简单,直观的 HTML5 视频播放器,你可以通过 ProgressionPlayer - 响应式音频 / 视频播放器找到它。

它甚至支持音频文件,使其成为可用于其他应用程序的通用解决方案。

ProgressionPlayer - Responsive AudioVideo PlayerProgressionPlayer - Responsive AudioVideo PlayerProgressionPlayer - Responsive AudioVideo Player

从产品页面:

“通过这款易于定制且功能齐全的音频 / 视频播放器展示你的作品。 购买此播放器时,你将收到详细的帮助文件以及其他功能,如 5 个自定义皮肤和响应式布局。“

易于定制,全屏视频支持,视频和音频播放列表等。

该 ProgressionPlayer - 响应音频 / 视频 FLASH 播放器,提供了坚实的音频和 HTML5 视频播放器。

14. Chameleon - 带有 Flash 备份的 HTML5 视频播放器

使用变色龙 - 带有 Flash 备份的 HTML5 视频播放器,保持简单。

Chameleon - HTML5 Video Player with Flash BackupChameleon - HTML5 Video Player with Flash BackupChameleon - HTML5 Video Player with Flash Backup

凭借其简洁的设计和简单的选项,这款 HTML5 视频播放器提供了视频播放的基础知识:

  • 浅色或深色皮肤和视网膜友好
  • 100%响应适合任何地方
  • 按住并拖动以清除视频
  • Flash 视频后备
  • 更多

该变色龙 - HTML5 视频播放器与 Flash 备份也可为 WordPress。

15. 超级视频播放器捆绑

Mega Video Player BUNDLE 不是一款功能强大,功能齐全的 HTML5 视频播放器。

这是其中的六个。

Mega Video Players BUNDLEMega Video Players BUNDLEMega Video Players BUNDLE

这个下载将为你提供三个不同的响应式视频播放器,每个播放器都有自己的 WordPress 对应播放器,总共有六个播放器。

该捆绑包括:

  • 简易视频播放器 / 简易视频播放器 WordPress 插件
  • 皇家视频播放器 / 皇家音频播放器 WordPress 插件
  • 终极视频播放器 / 终极视频播放器 WordPress 插件

你将在每个播放器中找到许多不同的功能:外部 API,深层链接,嵌入和共享,多个播放列表等等。

虽然 Mega Video Player BUNDLE 是最昂贵的选择,但它也是最具成本效益的选择。

结论

有各种各样的 HTML5 视频播放器。 找到合适解决方案的关键是找到满足你所有需求的视频播放器。 可能你要做的最后一件事是使用臃肿的解决方案,或者更糟糕的是,无法执行你想要完成的任务。

如果你喜欢自己动手丰衣足食,也许一些 Envato Tuts + HTML5 代码教程,网页开发课程或代码电子书可以让你开始开发自己的 HTML5 视频播放器。 否则,请考虑前面提到的 15 个 HTML 视频播放器,或留意 CodeCanyon 上的新内容。

和往常一样,你将在 Envato Market 上找到各种有用的 Web 开发插件,脚本等。

关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.