vuevideo基于vue.js的视频播放器组件

JavaScript045

vuevideo基于vue.js的视频播放器组件,第1张

一款基于 vue.js 的轻量级的视频播放器插件插件

NPM

或者使用 yarn

默认英语，你如果想成中文就加一个 lang

en: 英语

zh-CN: 简体中文

jp: 日本

Use custom language data

外部路径：

非常简单！就是直接上！

本地路径：

不能直接 ./assets/1.mp4 ，无效的。需要使用 require("...")

组件保持了和原生 HTML Video 属性配置的对接

案例

VueCoreVideoPlayer 遵循 W3C 标准的媒体事件 API ,你可以前往 MDN 获取这些细节，下面罗列一些非常常用的事件：

原文地址：vue-core-video-player-基于vue.js的视频播放器组件 - Iron_Man-super - 博客园

最近做视频功能，看了一些视频相关的插件，发现下面两个还是比较好用，这里推荐一下：

videojs应该很多人都知道，比较成熟的插件了这里是官网地址：

然后Mui Player也是很不错跟videojs差不多都很好用，对比videojs优势应该就是文档更好阅读点对于英语不好的是个好事。

我自己用了videojs，

然后项目主要是做了视频的一个上传和视频的展示功能

看看效果图：

使用的话官方文档自己翻

最后主要说一下我用了插件后踩的一些坑，特别是上传部分，其它的都还好。

我项目需求上传需要做封面图，然后安卓用户的插件可以支持自动截取视频第一张图，ios的因为限制不支持视频自动去加载元数据不会自动截取视频第一张图，所以ios的只能去手动给poster一个值就是手动给个固定图片，网上很多canvas截图其实也是一个道理也是需要加载元数据才行，ios的也是截图截不下来只会是一个黑色的图片，所以只能手动给个默认图片了，播放列表也是，对于mov格式的就是ios用户上传的视频，并且查看者是用的ios手机，也是无法自动给封面。

具体两种解决方法如下：

第一种：

1，Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，

2，如果不支持 HTML5 则自动使用 Flash 播放器。

第二种：

1，通过使用原生的video标签，然后再属性中没用使用controls属性，

2，然后再自己百度了暂停、播放、全屏、播放进度的代码，然后添加上去即可。