官方网址
官网:https://core-player.github.io...
安装
第一步:安装cnpm i vue-core-video-player -S
第二步:main全局引入
默认英语,你如果想成中文就加一个lang
en: 英语
zh-CN: 简体中文
jp: 日本
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)
//或者
Vue.use(VueCoreVideoPlayer, {
lang: 'zh-CN'
})
第三步:HTML
<vue-core-video-player src="路径"></vue-core-video-player>
解决路径问题
外部路径:
非常简单!就是直接上!
<vue-core-video-player src="http://link.mxlogo.com/vide003.mp4">
</vue-core-video-player>
本地路径:
不能直接./assets/1.mp4
,无效的。需要使用require("...")
<template>
<div id="app">
<vue-core-video-player :src="a"></vue-core-video-player>
</div>
</template>
<script>
export default{
data(){
return{
a:require("./assets/1.mp4")
}
}
}
</script>
分辨率切换
用过B站的朋友们都知道!上传各种分辨率供大家选择。
这个也没问题
<template>
<div id="app">
<vue-core-video-player :src="a"></vue-core-video-player>
</div>
</template>
<script>
export default{
data(){
return{
a: [{
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
resolution: 360,
}, {
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
resolution: 720,
}, {
src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
resolution: 1080
}]
}
}
}
</script>
更多
:muted="true"
:静音吗?:autoplay="false"
: 自动播放吗?title="哈哈哈哈哈哈哈"
:视频左上角的标题preload="nona"
:none看一部分加载一部分 metadata 别管我!玩命加载:loop="true"
:不停重播吗?
<template>
<div id="app">
<vue-core-video-player
:muted="true"
:autoplay="false"
title="哈哈哈哈哈哈哈"
preload="nona"
:loop="true"
></vue-core-video-player>
</div>
</template>
底部任务栏
Controls
<vue-core-video-player controls="fixed"></vue-core-video-player>
<vue-core-video-player :controls="false"></vue-core-video-player>
fixed | 始终显示 |
auto | 导航栏不操作后自动消失 |
true | 跟auto一样,导航栏不操作后自动消失 |
false | 始终不显示导航栏 |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。