首页 前端知识 vue3<script setup> typeScript视频播放(支持视频、m3u8直播流)

vue3<script setup> typeScript视频播放(支持视频、m3u8直播流)

2024-06-01 10:06:35 前端知识 前端哥 111 111 我要收藏

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10405.html
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!