vue3<script setup>+typeScript video playback (support video, m3u8 live streaming)

Vue3-video-play is equivalent to the secondary encapsulation of video, supports all the properties and methods of video, and also supports the m3u8 format of live streaming.

manual:

Note: If you want to play automatically in the browser, you need to add muted, otherwise the browser does not allow direct automatic play.

1. Install the plugin

npm installation: npm i vue3-video-play --save

yarn installation: npm add vue3-video-play --save

2. main.ts global use

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

import vue3videoPlay from 'vue3-video-play' // 引入npm i vue3-video-play --save

import 'vue3-video-play/dist/style.css' // import css style

app.use(vue3videoPlay)

app.mount('#app')

Individual pages use:

<script setup lang="ts">

import { reactive } from 'vue';

interface VideoOptions {

  autoPlay: boolean;

  loop: boolean;

  control: boolean;

  muted: boolean;

  src: string;

  poster: string;

}

const options = reactive<VideoOptions>({

  autoPlay:true,//Whether to play automatically

  loop:true,//Whether to play in a loop

  control: false, //whether to display the control bar

  muted: true, //Mute

  src: "http://vjs.zencdn.net/v/oceans.mp4", //video source

  poster: '', //cover

})

</script>

<template>  

      <vue3VideoPlay

      width="100%"

      height="100%"

      style="object-fit: cover;"

     v-bind="options"

       />

</template>

Example of m3u8 format:

<script setup lang="ts">

import { reactive } from 'vue';

interface VideoOptions {

  autoPlay: boolean;

  loop: boolean;

  control: boolean;

  muted: boolean;

  src: string;

  type: string;

}

const options = reactive<VideoOptions>({

  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //video source

   type: 'm3u8', //video type

  autoPlay:true,//Whether to play automatically

  loop:true,//Whether to play in a loop

  control: false, //whether to display the control bar

  muted: true, //Mute

 })

</script>

<template>  

      <vue3VideoPlay

      width="100%"

      height="100%"

      style="object-fit: cover;" //Keep the original size ratio. However, some content may be cut.

      :autoPlay="options.autoPlay"

      :control="options.control"

      :loop="options.loop"

      :muted="options.muted"

      :src="options.src"

       />

</template>