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播放器的主要内容,如果未能解决你的问题,请参考以下文章

视频播放平台vue-core-video-player

请问使用 易语言 如何 获得 在线视频的时长,实现 一条视频播放完毕后,自动播放下一个视频, 如果有源代

《安富莱嵌入式周报》第301期:ThreadX老大离开微软推出PX5 RTOS第5代系统,支持回流焊的自焊接PCB板设计,单色屏实现多级灰度播放视频效果

《安富莱嵌入式周报》第301期:ThreadX老大离开微软推出PX5 RTOS第5代系统,支持回流焊的自焊接PCB板设计,单色屏实现多级灰度播放视频效果

CLR与JVM

多次播放声音的问题