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

一 介绍

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

• 个性化配置

• i18n

• 服务端渲染

• 画中画模式

• 事件订阅

• 易于开发

• 移动端适配

1.1 官方文档

https://core-player.github.io/vue-core-video-player/zh/get-started.html

1.2 安装和快速使用

第一步：安装

NPM

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

或者使用

yarn add -S vue-core-video-player

第二步：main.js引入

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": "전체 화면 종료",},}
.(, {
: kr
}

第三步：在组件中写入

<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>

本地路径：
不能直接，无效的。需要使用

<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>

二 基本配置

2.1 分辨率切换

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

2.2 不通浏览器播放不同文件

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',
  }
]

2.3 底部控制栏

// 1 String 类型
 表示底部导航栏会一直固定显示；
 表示底部导航栏在用户未产生任何交互操作后自动消失，默认的形式；// 2 Boolean 类型
false 表示始终不显示导航栏；
true 默认值；它和设置 'auto' 形式类似；

2.4 自动播放

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

2.5 视频播放控制

HTML Video 属性配置的对接

案例

<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 基本事件

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

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

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

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

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

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

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

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

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

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

<template>  <template>
}
}

3.2 播放错误

播放错误偶有发生，我们提供了播放错误码方便开发者或者用户了解一些原因。

<template>
  <div class="player-container">
    <vue-core-video-player @error="errorHandle" src="./videos/your_video.mp4"></vue-core-video-player>
  </div>
<template>
<script>
export default {
methods: {
errorHandle (e {
// handle error
},
}
}

全屏效果图

效果图

四 播放 HLS

HLS（HTTP Live Streaming）——基于HTTP的自适应码率流媒体传输协议。HLS描述了一组通过互联网提供音视频服务的工具和程序。一个视频可以被分割成多个视频切片，这些切片的传送位置和顺序在一组被称为播放列表的XML文件中，该文件以文件扩展名m3u8结尾。人们可以使用兼容了HLS的播放器播放视频 playcore-hls 是一款 HLS 解码插件，方便支持 HLS 的播放。

4.1 快速开始

$ npm install @core-player/playcore-hls --save

<template>
  <div id="app">
    <div class="player-container">
      <vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player>
    </div>
  </div>
</template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
import HLSCore from '@core-player/playcore-hls</script>

声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！

编程笔记 » vue-core-video-player-基于vue.js的视频播放器组件