vue3＜script setup＞ typeScript视频播放（支持视频、m3u8直播流）

vue3-video-play相当于video的二次封装，支持video的所有本身属性和方法,同时也支持直播流m3u8格式。

使用流程：

注意：想要在浏览器自动播放，要添加静音muted,否则浏览器不允许直接自动播放。

1.安装插件

npm安装：npm i vue3-video-play --save

yarn安装：npm add vue3-video-play --save

2.main.ts全局使用

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' // 引入css样式

app.use(vue3videoPlay)

app.mount('#app')

单独页面使用：

<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,//是否自动播放

  loop:true,//是否循环播放

  control:false,//是否显示控制条

  muted:true, //静音

  src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源

  poster: '', //封面

})

</script>

<template>  

      <vue3VideoPlay

      width="100%"

      height="100%"

      style="object-fit: cover;"

     v-bind="options"

       />

</template>

m3u8格式举例：

<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", //视频源

   type: 'm3u8', //视频类型

  autoPlay:true,//是否自动播放

  loop:true,//是否循环播放

  control:false,//是否显示控制条

  muted:true, //静音

 })

</script>

<template>  

      <vue3VideoPlay

      width="100%"

      height="100%"

      style="object-fit: cover;"  //保持原有尺寸比例。但部分内容可能被剪切。

      :autoPlay="options.autoPlay"

      :control="options.control"

      :loop="options.loop"

      :muted="options.muted"

      :src="options.src"

       />

</template>