Vue3视频播放器组件Vue3-video-play入门教程
Posted Roc-xb
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3视频播放器组件Vue3-video-play入门教程相关的知识,希望对你有一定的参考价值。
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。
1、支持快捷键操作
2、支持倍速播放设置
3、支持镜像画面设置
4、支持关灯模式设置
5、支持画中画模式播放
6、支持全屏/网页全屏播放
7、支持从固定时间开始播放
8、支持移动端,移动端会自动调用自带视频播放器
9、支持hls视频流播放,支持直播10、hls播放支持清晰度切换
目录
1、安装方式
(1)npm安装方式
npm i vue3-video-play --save
(2)yarn安装方式
yarn add vue3-video-play --save
2、使用方式
(1)局部使用
// require style
import 'vue3-video-play/dist/style.css'
import videoPlay from 'vue-video-play'
export default
components:
videoPlay
(2)全局使用
import createApp from 'vue'
import App from './App.vue'
let app = createApp(App)
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)
app.mount('#app')
3、示例代码
(1)事件示例
vue3-video-play
支持原生video
所有事件。
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@play="onPlay"
@pause="onPause"
@timeupdate="onTimeupdate"
@canplay="onCanplay" />
</div>
</template>
<script setup lang="ts">
import reactive from 'vue';
const options = reactive(
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
poster: '', //封面
)
const onPlay = (ev) =>
console.log('播放')
const onPause = (ev) =>
console.log(ev, '暂停')
const onTimeupdate = (ev) =>
console.log(ev, '时间更新')
const onCanplay = (ev) =>
console.log(ev, '可以播放')
</script>
<style scoped>
</style>
(2)Hls m3u8视频/直播
vue3-video-play
支持m3u8(hls)播放
<template>
<div>
<vue3VideoPlay
width="800px"
title="冰河世纪"
:src="options.src"
:type="options.type"
:autoPlay="false"
/>
</div>
</template>
<script setup lang="ts">
import reactive from 'vue';
const options = reactive(
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
type: 'm3u8', //视频类型
)
</script>
<style scoped>
</style>
4、属性 Props
vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
color | 播放器主色调 | string | - | #409eff |
src | 视频资源 | string | - | - |
title | 视频名称 | string | - | - |
type | 视频类型 | string | - | video/mp4 |
poster | 视频封面 | string | - | 视频第一帧 |
webFullScreen | 网页全屏 | boolean | - | false |
speed | 是否支持快进快退 | boolean | - | true |
currentTime | 跳转到固定播放时间(s) | number | - | 0 |
playsinline | ios点击屏幕是否全屏 | boolean | - | false |
muted | 静音 | boolean | - | false |
speedRate | 倍速配置 | array | - | ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"] |
autoPlay | 自动播放 | boolean | - | false,为true时会自动静音 |
loop | 循环播放 | boolean | - | false |
mirror | 镜像画面 | boolean | - | false |
ligthOff | 关灯模式 | boolean | - | false |
volume | 默认音量 | number | 0-1 | 0.3 |
control | 是否显示控制器 | boolean | - | true |
controlBtns | 控制器显示的按钮 | array | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] |
preload | 预加载 | string | meta/auto/none | auto |
props
属性 controlBtns
按钮说明
名称 | 说明 |
---|---|
audioTrack | 音轨切换按钮 |
quality | 视频质量切换按钮 |
speedRate | 速率切换按钮 |
volume | 音量 |
setting | 设置 |
pip | 画中画按钮 |
pageFullScreen | 网页全屏按钮 |
fullScreen | 全屏按钮 |
Events
vue3-video-play支持video原生所有事件 video默认事件
事件名称 | 说明 | 回调 |
---|---|---|
mirrorChange | 镜像翻转事件 | val |
loopChange | 循环播放开关事件 | val |
lightOffChange | 关灯模式事件 | val |
loadstart | 客户端开始请求数据 | event |
progress | 客户端正在请求数据 | event |
error | 请求数据时遇到错误 | event |
stalled | 网速失速 | event |
play | 开始播放时触发 | event |
pause | 暂停时触发 | event |
loadedmetadata | 成功获取资源长度 | event |
loadeddata | 缓冲中 | event |
waiting | 等待数据,并非错误 | event |
playing | 开始回放 | event |
canplay | 暂停状态下可以播放 | event |
canplaythrough | 可以持续播放 | event |
timeupdate | 更新播放时间 | event |
ended | 播放结束 | event |
ratechange | 播放速率改变 | event |
durationchange | 资源长度改变 | event |
volumechange | 音量改变 | event |
快捷键说明
键名 | 说明 |
---|---|
Space | 暂停/播放 |
方向右键 → | 单次快进 10s,长按 5 倍速播放 |
方向左键 ← | 快退 10s |
方向上键 ↑ | 音量+10% |
方向下键 ↓ | 音量-10% |
Esc | 退出全屏/退出网页全屏 |
F | 全屏/退出全屏 |
vue播放rtmphls m3u8格式视频
选用Video.js作为视频播放库,如果要支持hls m3u8还需要videojs-contrib-hls组件的支持。
安装Video.js
npm install --save video.js
安装videojs-contrib-hls
npm install --save videojs-contrib-hls
创建一个vue的播放组件
src/components/VideoPlayer/index.vue
<template>
<div>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import videojs from ‘video.js‘
import ‘video.js/dist/video-js.css‘
import ‘videojs-contrib-hls‘
export default {
name: "VideoPlayer",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log(‘onPlayerReady‘, this);
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
</script>
在页面中引用VideoPlayer组件
<template>
<div class="view-warp">
<component :is="currentComponent" :options="videoOptions"></component>
</div>
</template>
<script>
import VideoPlayer from "../../components/VideoPlayer/index.vue";
export default {
name: "view",
data() {
return {
currentComponent: null,
videoOptions: {
autoplay: false,
controls: true,
poster: ‘‘,
sources: [
{
src: "",
type: "application/x-mpegURL"
}
]
}
}
},
methods: {
loadData() {
this.videoOptions.poster = ‘http://localhost/poster.png‘
this.videoOptions.sources[0].src = ‘http://localhost/index.m3u8‘
this.currentComponent = VideoPlayer
}
},
created: function() {
this.loadData()
}
}
</script>
<style lang="scss">
.video-js {
width: 1024px !important;
height: 720px !important;
}
.vjs-big-play-button {
left: 50% !important;
top: 50% !important;
margin-left: -2em;
margin-top: -1.3em;
}
.video-warp {
display: flex;
}
.view-warp {
padding: 0;
margin: 0 auto;
display: flex;
.desc {
margin-left: 10px;
}
}
</style>
如果要播放rtmp或者rtsp需要把sources.type改成rtmp/flv。
Video.js官方参考文档:https://docs.videojs.com/tutorial-vue.html
本文标题:vue播放rtmp、hls m3u8格式视频
本文地址:https://dev-tang.com/post/2020/04/vue-rtmp-hls-m3u8.html
以上是关于Vue3视频播放器组件Vue3-video-play入门教程的主要内容,如果未能解决你的问题,请参考以下文章
web前端培训分享:使用Dplayer实现Vue3中的视频及弹幕播放