vue-core-video-player-基于vue.js的视频播放器组件
source link: https://www.cnblogs.com/goOJBK/p/16209251.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vue-core-video-player-基于vue.js的视频播放器组件
一款基于 vue.js 的轻量级的视频播放器插件插件
- 个性化配置
- 服务端渲染
- 画中画模式
- 移动端适配
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>
}
<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
},
}
}
全屏效果图
四 播放 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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK