vue3<configuração do script>+reprodução de vídeo typeScript (vídeo de suporte, transmissão ao vivo m3u8)

Vue3-video-play é equivalente ao empacotamento secundário de vídeo, que suporta todas as propriedades e métodos de vídeo, e também suporta o formato m3u8 de transmissão ao vivo.

manual:

Nota: Se você quiser jogar automaticamente no navegador, você precisa adicionar mudo, caso contrário, o navegador não permite a reprodução automática direta.

1. Instale o plug-in

instalação do npm: npm i vue3-video-play --save

instalação do yarn: npm add vue3-video-play --save

2. uso global main.ts

importar { createApp } de 'vue'

importar aplicativo de './App.vue'

const app = createApp(Aplicativo)

importar vue3videoPlay de 'vue3-video-play' // 引入npm i vue3-video-play --save

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

app.use(vue3videoPlay)

app.mount('#app')

Uso de página única:

<script setup lang="ts">

importar { reativo } de 'vue';

interface VideoOptions {

  reprodução automática: booleano;

  loop: booleano;

  controle: booleano;

  silenciado: booleano;

  src: string;

  pôster: barbante;

}

opções const = reactivo<VideoOptions>({

  autoPlay:true, //Se deve reproduzir automaticamente

  loop:true,//Se deve jogar em um loop

  control: false, //se deve exibir a barra de controle

  silenciado: verdadeiro, //Mudo

  src: "http://vjs.zencdn.net/v/oceans.mp4", //fonte do vídeo

  cartaz: '', //capa

})

</script>

<modelo>  

      <vue3VideoPlay

      largura="100%"

      altura="100%"

      style="ajuste do objeto: capa;"

     v-bind="opções"

       />

</modelo>

Exemplo de formato m3u8:

<script setup lang="ts">

importar { reativo } de 'vue';

interface VideoOptions {

  reprodução automática: booleano;

  loop: booleano;

  controle: booleano;

  silenciado: booleano;

  src: string;

  tipo: string;

}

opções const = reactivo<VideoOptions>({

  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //fonte do vídeo

   tipo: 'm3u8', //tipo de vídeo

  autoPlay:true, //Se deve reproduzir automaticamente

  loop:true,//Se deve jogar em um loop

  control: false, //se deve exibir a barra de controle

  silenciado: verdadeiro, //Mudo

 })

</script>

<modelo>  

      <vue3VideoPlay

      largura="100%"

      altura="100%"

      style="object-fit: cover;" //Mantém a proporção do tamanho original. No entanto, alguns conteúdos podem ser cortados.

      :autoPlay="options.autoPlay"

      :control="options.control"

      :loop="options.loop"

      :muted="options.muted"

      :src="opções.src"

       />

</modelo>