vue如何实现播放(Vue-Video-Player-一款轻量精致的web播放组件)

vue如何实现播放(Vue-Video-Player-一款轻量精致的web播放组件)(1)

看这接地气的名称就知道,这是一款基于 vue.js 的轻量级、优秀的视频播放器组件。

介绍

短视频大火已经有很长时间了,日常工作中我们可能很容易接到视频播放相关的需求。这是一款非常优秀的视频播放组件,pc 或者 移动都可以使用,而且UI精美,美观,丝毫不逊色于爱奇艺、优酷等国内一线网站的UI。

vue如何实现播放(Vue-Video-Player-一款轻量精致的web播放组件)(2)

组件使用示例截图

特点
  • 支持HLS直播流格式播放;
  • 支持个性化配置,设计师和开发者可以根据需求定制主题界面;
  • 支持i18n(国际化),默认支持中文、英文和日文,可以定制整个播放器的文案;
  • 支持服务端渲染;
  • 支持随处可见的画中画模式;
  • 支持事件订阅;
  • 优秀的API设计,易于开发;
  • 移动端适配。
使用体验

作为一个前端开发者,我在之前的项目用过几个视频托管平台(比如七牛云)官方的播放器,其难用程度以及灵活性让人崩溃,不仅不支持 vue.js,而且对移动很不友好。

Vue-Core-Video-Player 有详细易懂的说明文档和充足的代码例子,因此非常容易使用。最让我喜欢的是可定制性很高,用在任何项目都不突兀。

vue如何实现播放(Vue-Video-Player-一款轻量精致的web播放组件)(3)

友好全面的api

官网提供了基于 Adobe XD 的 UI 设计的源文件,方便设计师下载进行二次创作。

vue如何实现播放(Vue-Video-Player-一款轻量精致的web播放组件)(4)

UI 设计源文件截图

一般来说,支持的视频播放格式和浏览器有关,一般是flv和mp4格式。作为一款优秀的现代视频播放组件,Vue-Core-Video-Player 同样支持直播流,通过HLS插件可以播放m3u8格式的流视频。

免费使用说明

Vue-Core-Video-Player 已经在github上开源,人人都可以自由下载学习和免费使用。

官网网站

https://core-player.github.io/vue-core-video-player/zh/

关注我,持续更新设计、前端圈免费开源、可商用资源。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页