vue-core-video-player的使用

介绍

vue-core-video-player是一款基于vue.js的视频播放器组件


安装与使用

安装

cnpm install vue-core-video-player -S

使用

第一步:main.js引入

import VueCoreVideoPlayer from 'vue-core-video-player'
// 默认是英文
Vue.use(VueCoreVideoPlayer)
//或者
Vue.use(VueCoreVideoPlayer, {
  lang: 'zh-CN'
})

en: 英语
zh-CN: 简体中文
jp: 日本


第二步:在组件中写入

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="视频文件路径.mp4"></vue-core-video-player>
  </div>
</div>

第三步:本地路径问题

外部路径:

 <vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4">
 </vue-core-video-player>

本地路径:

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

<template>
  <div id="app">
       <vue-core-video-player :src="url"></vue-core-video-player>
  </div>
</template>

<script>
    export default{
        data(){
            return{
                url:require("./assets/1.mp4")
            }
        }
    }
</script>

进阶使用

更多配置

posted @ 2024-01-30 20:53  wellplayed  阅读(260)  评论(0编辑  收藏  举报