vue-core-video-player播放器
Posted 赵不悔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-core-video-player播放器相关的知识,希望对你有一定的参考价值。
官方网址
官网: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 | 始终不显示导航栏 |
以上是关于vue-core-video-player播放器的主要内容,如果未能解决你的问题,请参考以下文章
请问使用 易语言 如何 获得 在线视频的时长,实现 一条视频播放完毕后,自动播放下一个视频, 如果有源代
《安富莱嵌入式周报》第301期:ThreadX老大离开微软推出PX5 RTOS第5代系统,支持回流焊的自焊接PCB板设计,单色屏实现多级灰度播放视频效果
《安富莱嵌入式周报》第301期:ThreadX老大离开微软推出PX5 RTOS第5代系统,支持回流焊的自焊接PCB板设计,单色屏实现多级灰度播放视频效果