安装

cnpm install -S vue-core-video-player

快速使用

# 在main.js中
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)  # 默认是英文的

'''做国际化'''
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer, {
  lang: 'zh-CN'  # 可以修改成中文
})

# 在你的组件中使用
<div id="app">
  <div class="player-container">
    <vue-core-video-player src="视频路径"></vue-core-video-player>
  </div>
</div>

基本配置

# 设置多分辨率视频，你必须resolution, src,默认的分辨率会选择 '720p'。可以指定选择的分辨率通过resolution这个属性来设置。
const videoSource = [
  {
    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
  }
]

视频播放控制

演示示例

<template>
    <div id="app">
        <div class="player-container">
            <vue-core-video-player  :src="videoSource" :cover="cover" :title= "title" loop="true"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                videoSource：'视频地址'
                cover : "显示视频的封面",
                title : "视频的标题"
            }
        }
    }
</script>

事件订阅

演示示例

<template>
  <div class="player-container">
    <vue-core-video-player :scr="path" @loadeddata="loaded" @play="playFunc" @pause="pauseFunc"></vue-core-video-player>
  </div>
<template>

<script>
export default {
  methods: {
    loaded () {
        console.log('视频开始加载第一帧的时候触发')
    },
    playFunc () {
        console.log('播放器开始播放或从暂停到播放状态')
    },
    pauseFunc () {
        console.log('视频停止播放的时候触发')
    }
  }
}