@playing="onPlayerPlaying"
@loadeddata="onPlayerLoadeddata"
@timeupdate="onPlayerTimeupdate"
@canplay="onPlayerCanplay"
@canplaythrough="onPlayerCanplaythrough"
@statechanged="playerStateChanged"
@ready="playerReadied"
// 视频格式
type:"video/webm" // 可以播放,用ogg也可打开
type:"video/ogg" // 可以播放,用webm也可打开
type:"video/3gp" // 可以播放
type:"video/mp4" // 可以播放
type:"video/avi" // 打不开 无法播放
type:"video/flv" // 打不开 可以使用flvjs代替
type:"video/mkv" // 打不开 使用video/mp4可以播放
type:"video/mov" // 打不开 使用video/mp4可以播放
type:"video/mpg" // 打不开 未测试
type:"video/swf" // 打不开 未测试
type:"video/ts" // 打不开 未测试
type:"video/wmv" // 打不开 未测试
type:"video/vob" // 没转化 未测试
type:"video/mxf" // 转化出错 未测试
type: "video/rm" // 转化出错 未测试
// 组件方法
重置进度条
this.player.src(src)
this.player.load();
this.player.play();
this.player.pause();
直接全屏 如果当前设备支持的话
this.player.requestFullscreen();
在全屏模式下,将视频恢复到正常大小
this.player.exitFullscreen();
当环境不支持全屏时 则扩展铺满容器
this.player.enterFullWindow();
重置播放器
this.player.reset();
返回当前播放源信息
this.player.currentSources();
获取或者设置预加载属性
this.player.preload(val);
播放控件是否显示
this.player.controls(false);
/* 父组件可以通过获取当前组件的 player 来调用 videoPlayer 组件的方法 */
推荐开源项目:
Vue
-
Video
- 视频播放器
组件
库
项目地址:https://gitcode.com/wunci/
vue
-
video
在现代Web开发中,多媒体元素已经成为用户体验的重要组成部分。如果你正在寻找一个强大而灵活的视频播放器
组件
,
Vue
-
Video
就是一个值得你关注的开源项目。它是一个专为
Vue.js
框架设计的,轻量级、可自定义的视频播放器。
Vue
-
Video
是一个...
本文实例为大家分享了
vue
使用
video
插件
vue
-
video
-
player
的具体代码,供大家参考,具体内容如下
进入我们的项目文件夹中,并打开命令行窗口,然后进行下面的步骤:
1、安装
vue
-
video
-
player
输入命令:
npm install
vue
-
video
-
player
-S
2、引入插件
在项目的入口文件main.js中引入插件,如下:
import
Video
Player
from '
vue
-
video
-
player
'
require('
video.js
/dist/
video
-js.css')
require('
vue
-
video
-
player
/src/custom-
vue
-core-
video
-
player
Vue.js
的轻量级视频播放器。
开始
使用
Npm $ npm安装
vue
-core-
video
-
player
--save Yarn $ yarn添加
vue
-core-
video
vue
-core-
video
-
player
适用于
Vue.js
的轻量级视频播放器。
开始
使用
Npm $ npm安装
vue
-core-
video
-
player
--save Yarn $ yarn添加
vue
-core-
video
-
player
--save
有些项目中,或者是视频网站,都需要视频播放功能。我们可以用H5的
video
标签实现播放,但是原生的样子视频播放器不太好看,功能也需要自己封装。这时候可以站在巨人的肩膀上,
使用
已造好的轮子
vue
-
video
-
player
Vue
-
Video
-
Player
video.js
player
component for
Vue
.适用于
Vue
的
video.js
播放器
组件
。ExampleInstallCDN
Vue
.use(window.
Vue
Video
Player
)NPMnpm install
vue
-
video
-
player
--saveMountmount with globalimport
Vue
from '
vue
'...
看过了网上的各种抄袭,是不是很烦!!!
以下做法绝对会解决你的问题。
在main.js中,书写以下代码,尤其是要正确找到 zh-CN.js 的路径,通过yarn/npm 安装的
vue
-
video
-
player
的 zh-CN.js路径在node_modules/
video.js
/dist/lang/zh-CN.js
然后注意window.
video
js =
Video
Player
.
video
js写在...
项目进行时, 对视频模块需要进行
组件
开发,结合当前
使用
的开发框架是
vue
cli。 于是寻找到
vue
-
video
-
player
根据github上的
文档
进行开发,发现并不能实现播放功能,于是在网站上进行寻找发现,
vue
-
video
-
player
依赖于
video
js
1、安装:
npm install
vue
-
video
-
player
--save
2、当前版本:
"
vue
": "^2.6.11",
"
vue
-
video
-
player
": "^5.0.2",
3、
vue
-
video
-
player
.
详解
vue
-
video
-
player
使用
心得(兼容m3u8)发布时间:2020-10-07 00:09:06来源:脚本之家阅读:112下载
vue
-
video
-
player
npm install
vue
-
video
-
player
--save在main.js文件引入import
Video
Player
from '
vue
-
video
-
player
'require('
video.js
/dist/vid...