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

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

Vue.use(VueCoreVideoPlayer, {
lang: 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> 

本地路径:
不能直接./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>

二 基本配置

2.1 分辨率切换

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

                }],         }     } } 

</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 底部控制栏

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

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

// 2 Boolean 类型
false 表示始终不显示导航栏;
true 默认值;它和设置 'auto' 形式类似;

2.4 自动播放

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

2.5 视频播放控制

组件保持了和原生 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 操作完成触发。
<template>   <div class="player-container">     <vue-core-video-player @loadedmetadata="loaded" @play="playFunc" @pause="pauseFunc" src="./videos/your_video.mp4"></vue-core-video-player>   </div> <template> 

<script>
export default {
methods: {
loaded () {
// your code
},
playFunc () {
// your code
},
pauseFunc () {

    <span class="hljs-comment">// your code</span> } 

}
}

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

全屏效果图

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

效果图

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

四 播放 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 

Vue.use(VueCoreVideoPlayer)

export default {
name: 'App',
data () {
return {
HLSCore
}
}
}

</script>

一 介绍

一款基于 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

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

Vue.use(VueCoreVideoPlayer, {
lang: 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> 

本地路径:
不能直接./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>

二 基本配置

2.1 分辨率切换

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

                }],         }     } } 

</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 底部控制栏

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

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

// 2 Boolean 类型
false 表示始终不显示导航栏;
true 默认值;它和设置 'auto' 形式类似;

2.4 自动播放

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

2.5 视频播放控制

组件保持了和原生 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 操作完成触发。
<template>   <div class="player-container">     <vue-core-video-player @loadedmetadata="loaded" @play="playFunc" @pause="pauseFunc" src="./videos/your_video.mp4"></vue-core-video-player>   </div> <template> 

<script>
export default {
methods: {
loaded () {
// your code
},
playFunc () {
// your code
},
pauseFunc () {

    <span class="hljs-comment">// your code</span> } 

}
}

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

全屏效果图

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

效果图

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

四 播放 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 

Vue.use(VueCoreVideoPlayer)

export default {
name: 'App',
data () {
return {
HLSCore
}
}
}

</script>

发表评论

相关文章