z-mobile-video v1.0.5

Vue3 z-mobile-video

适用于 Vue3 的移动端全屏播放组件，PS：仅支持微信浏览器

功能一览

1. 支持m3u8格式视频
2. 支持倍速播放设置
3. 支持从固定时间开始播放
4. 支持双击事件
5. 可自定义播放按钮
6. 可自定义error按钮
7. 暂不支持长按功能，后续版本会加上
8. 暂不支持缩放功能，后续版本会加上

近期更新 v1.0.3

• 新增: 支持 hls 视频流播放
• 优化：修复 ios 播放异常bug

使用指南

安装

npm 安装：

npm i z-mobile-video --save

引入

全局使用

import { createApp } from 'vue'
import App from './App.vue'
import ZMobileVideo from 'z-mobile-video' // 引入组件
import 'z-mobile-video/dist/style.css' // 引入css

const app = createApp(App)
app.use(ZMobileVideo)

app.mount('#app')

组件内使用

import 'z-mobile-video/dist/style.css'
import { ZMobileVideo } from 'z-mobile-video'
export default {
  components: {
    ZMobileVideo,
  },
}

代码演示

<template>
  <div>
    <z-mobile-video v-bind="options"></z-mobile-video>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const options = reactive({
  width: '100vw',    // 播放器宽度，默认100vw
  height: '100vh',   // 播放器高度，默认100vh
  src: 'xxx.mp4',    // 视频地址
  poster: 'xxx.png', // 视频海报
  type: 'video/mp4', // 视频类型
  muted: false,      // 视频静音
  autoplay: false,   // 自动播放
  loop: true,        // 循环播放
  volume: 1,         // 音量大小 0-1
  preload: 'auto',   // 预加载
  objectFit: 'contain', // 同css object-fit，作用于video标签
  currentTime: 0,    // 当前播放时间
  showCurrentTime: false, // 是否在拖动进度条时toast当前时间文字
  errorText: '',    // 视频error时，toast提示
})
</script>

<style scoped></style>

Hls m3u8视频/直播

<template>
  <div>
    <z-mobile-video v-bind="options"></z-mobile-video>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const options = reactive({
  src: 'xxx.m3u8', // 视频源
  type: 'm3u8', // 视频类型
})
</script>

<style scoped></style>

autoplay

移动端禁止video自动播放，除非用户主动发生了页面交互动作，比如click，touchstart等事件

slots

<template>
  <div>
    <z-mobile-video v-bind="options">
      <template #poster>自定义poster</template>
      <template #play-btn>播放按钮</template>
      <template #error>视频请求失败</template>
      <template #footer>进度条下方显示</template>
    </z-mobile-video>
  </div>
</template>

事件示例

z-mobile-video 支持原生video所有事件

<template>
  <div>
    <z-mobile-video
      v-bind="options"
      @play="onPlay"
      @pause="onPause"
      @canplay="onCanplay"
      @timeupdate="onTimeupdate"
      @click="onClick"
      @dblclick="onDblclick"
      ...
    ></z-mobile-video>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const options = reactive({
  src: 'xxx.mp4',
  poster: 'xxx.png',
})
const onPlay = (e) => {
  console.log(e, '播放')
}
const onPause = (e) => {
  console.log(e, '暂停')
}
const onCanplay = (e) => {
  console.log(e, '可以播放')
}
const onTimeupdate = (e) => {
  console.log(e, '时间更新')
}
const onClick = () => {
  console.log('click!!!')
}
const onDblclick = () => {
  console.log('双击!!!')
}
...
</script>

Ref

通过 ref 可以获取到 z-mobild-video 实例并调用实例方法。

<template>
  <div>
    <z-mobile-video ref="zVideo" v-bind="options"></z-mobile-video>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const zVideo = ref()

onMounted(() => {
	console.log(zVideo.value.$video) // video dom
	// zVideo.value.play() // 播放事件
	// zVideo.value.pause() // 暂停事件
	// zVideo.value.togglePlay() // 播放|暂停切换
	// zVideo.value.playbackRate(2) // 设置播放速率
})
</script>

API

props

Events

Slots

方法

点个 start

z-mobile-video