V2AS问路
vue-core-video-player-基于vue.js的视频播放器组件
阅读原文时间：2022年04月30日阅读：1

一 介绍

一款基于 vue.js 的轻量级的视频播放器插件插件

第一步：安装

NPM

npm install --save vue-core-video-player

或者使用 yarn

yarn add -S vue-core-video-player

第二步：main.js引入

默认英语，你如果想成中文就加一个lang

en: 英语

zh-CN: 简体中文

jp: 日本

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

Use custom language data

import VueCoreVideoPlayer from 'vue-core-video-player'

const kr = {
...
"dashboard" : {
"btn": {
....
"pause": "일시적인",
"fullscreen": "전체화면",
"exitFullscreen": "전체 화면 종료",
},
}

第三步：在组件中写入

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.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>

二 基本配置

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

<script>
export default{
data(){
return{
mp4_url: [
{
src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑320p.mp4',
resolution: 360,
},
{
src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑720p.mp4',
resolution: 720,
},
{
src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命诱惑4k.mp4',
resolution: '4k',
                }],
        }
    }
}



const videoSource = [
  {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm',
    type: 'video/webm',
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    type: 'video/mp4',
  }
]


// 底部控制栏 controls 属性 可以用来控制底部控制栏的显示隐藏

// 1 String 类型
'fixed' 表示底部导航栏会一直固定显示；
'auto' 表示底部导航栏在用户未产生任何交互操作后自动消失，默认的形式；



//如果你设置了 autoplay, 播放器会尝试自动播放视频；
//由于不同的浏览器对自动播放行为的限制不一样；
//如果播放器自动播放失败会显示播放按钮，方便用户手动触发

组件保持了和原生 HTML Video 属性配置的对接

Props

Type

Example

Description

volume

number

0.5

控制视频音量(0-1)

muted

boolean

true

设置为 true, 视频会静音

cover

string

'./cover.png'

显示视频的封面，如果设置 autoplay，自动播放成功后，不会显示

title

string

'your title'

展示视频的标题，方便 SEO

logo

string

'./logo.png'

显示播放器的 logo

loop

boolean

true

会循环播放当前视频

preload

string

'metadata'

'none' 表示不会预加载视频; 'metadata' 表示只加载视频 metadata 信息部分

cover

string

图片地址

预览图

案例

<vue-core-video-player :src="mp4_url"
     :muted="true"
     :autoplay="false"
     title="致命诱惑"
     preload="nona"
     :loop="true"
     controls="auto"
     cover='https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png'
></vue-core-video-player>

三 事件

3.1 基本事件

VueCoreVideoPlayer遵循W3C标准的媒体事件API,你可以前往MDN获取这些细节，下面罗列一些非常常用的事件：

  • play 表示当播放器开始播放或者通过 play() 方法从暂停状态恢复。

  • pause 当播放器停止播放的时候触发。

  • progress 当播放器正在下载媒体资源。

  • loadeddata 当播放器开始加载第一帧时候触发。

  • canplay 当加载足够数据可以满足基本播放后触发.。

  • durationchange 当媒体获取一定数据，并且完整的解析出 metadata 信息。

  • ended 当媒体播放结束时候触发。

  • timeupdate 当播放的媒体 currenttime 发生改变时候触发。

  • seeked 当用户 seek 操作完成触发。