vue3兼容flv和m3u8的插件(hls.js和flv.js)

1.下载插件

js 复制代码
cnpm install hls.js flv.js

导入项目

js 复制代码
import Hls from 'hls.js'
import flvjs from 'flv.js'

使用

js 复制代码
<script setup>
	// m3u8格式视频使用变量
    const player = ref(null)
    const video = ref(null)
    // flv格式视频使用
    const videoRef = ref(null)
    let flvPlayer = null
    // 这个变量用来判断是哪个格式视频就进入哪个(默认m3u8)
    let flag = ref(true)
	onUnmounted(() => {
      // 在页面刚加载就显示视频
         // 这个是视频链接
        // m3u8地址:https://gc2ksc.v.kcdnvip.com/gc/zsslsjjfsd_1/index.m3u8?BR=md&region=shanghai
        // flv地址:http://video.epaper.pybtv.cn:8080/live/rtmp_live_demo.flv

        // 固定链接
        let videosrc = ref("http://video.epaper.pybtv.cn:8080/live/rtmp_live_demo.flv")
        // 下面是通过请求获得的链接(动态显示)
        // let videosrc = ref(gameScreenList.gameInfo.live_event)
        // 截取链接,判断是什么格式的视频(判断格式让对应显示)
        flag.value = videosrc.value.includes(".m3u8")// 只能返回true或者false
        gameScreenList.gameLivePlayFlag = false
        if (flag.value) {
          if (Hls.isSupported()) {
            var hls = new Hls()
            hls.loadSource(videosrc.value)
            hls.attachMedia(video.value)
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
              video.value.play()
            })
          } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.value.src = videosrc.value
            video.addEventListener('loadedmetadata', function () {
              video.value.play()
            })
          }
        } else {
          // 创建 FLV 播放器实例
          flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: videosrc.value, // 替换为实际的 FLV 视频 URL
          })
          console.log('flvPlayer', flvPlayer)
          // 绑定 FLV 播放器到 <video> 标签
          flvPlayer.attachMediaElement(videoRef.value)
          // 初始化 FLV 播放器
          flvPlayer.load()
          flvPlayer.play()
        }
    })
<script>
<template>
<!-- m3u8格式视频展示 -->
<video
   ref="video"
   class="videoElement"
   autoplay
   controls
   muted
   v-show="flag === true"
   ></video>
<!-- flv格式视频展示 -->
<video
   ref="videoRef"
   v-show="flag === false"
   autoplay
   muted
   class="videoElement"
   controls
   ></video>
</template>
相关推荐
脑袋大大的15 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0124 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
Wy. Lsy42 分钟前
Kotlin基础学习记录
开发语言·学习·kotlin
Tanecious.1 小时前
C++--红黑树
开发语言·c++
Top`1 小时前
Java 泛型 (Generics)
java·开发语言·windows
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2 小时前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
Shartin2 小时前
Can201-Introduction to Networking: Application Layer应用层
服务器·开发语言·php
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
共享家95273 小时前
linux_线程概念
linux·开发语言·jvm