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安装方式

 (2)yarn安装方式

2、使用方式

(1)局部使用

(2)全局使用

3、示例代码

(1)事件示例

(2)Hls m3u8视频/直播

4、属性 Props


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
playsinlineios点击屏幕是否全屏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默认音量number0-10.3
control是否显示控制器boolean-true
controlBtns控制器显示的按钮array['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']
preload预加载stringmeta/auto/noneauto

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中的视频及弹幕播放

vue利用videojs-player实现视频播放

支持vue3.0 中的音频插件都有哪些?

vue3视频学习笔记

在webpack下使用vue3 无法引入单文件的vue组件问题

写vue3+ jsx+ts语法+ storybook展示的组件库