视频融合 flv流格式对接(上）

news2024/12/23 13:20:43

FLV 是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。

发展：

FLV是被众多新一代视频分享网站所采用，是增长最快、最为广泛的视频传播格式。是在sorenson公司的压缩算法的基础上开发出来的。FLV格式不仅可以轻松的导入Flash中，速度极快，并且能起到保护版权的作用，并且可以不通过本地的微软或者REAL播放器播放视频。

历史：

网络宽带的普及使中国网民数量跃升至全球第一，同时也造就了众多的网络神话，GOOGLE斥巨资收购YouTube，似乎将国内外本身已经够火的Web2.0视频网站被广泛关注。随后视频、播客等网站在国内如雨后春笋般兴起，新的网络战役一触即发，这对于FLV视频格式的普及无疑是一个巨大的推动力。

优势：

FLV作为一种新兴的网络视频格式，能得到众多的网站支持并非偶然。除了FLV视频格式本身占有率低、视频质量良好、体积小等特点适合网络发展外，丰富、多样的资源也是FLV视频格式统一在线播放视频格式的一个重要因素。从最新的变形金刚到越狱再到各项体育节目，甚至于网友制作的自拍视频等都可以在网络中轻而易举的找到。
在互联网上提供FLV视频的有两类网站，一种是专门的视频分享网站如美国的YouTube网站、国内的六间房、土豆网等。另一种是门户网站提供了视频播客的板块，提供了自己的视频频道，如新浪视频播客等，也是使用FLV格式的视频。此外，百度也推出了关于视频搜索的功能，里面搜索出来的视频基本都是采用了流行的FLV格式。

下面我们就来讲一讲如何对接吧

首先我们创建视频的载体：

<template>
  <div class="home">
    <video ref="videoElementRef" id="videoElement" controls muted style="width: 500px; height: 500px; object-fit: fill"></video>
  </div>
</template>

载体出现了
在这里插入图片描述
我们使用的是flv.js npm 包
所以我们先下载npm包(下面两种都可）

npm install hls.js
yarn add hls.js

在这里插入图片描述
等待安装…

安装完后我们需要引入注册

import { ref, onBeforeUnmount, onMounted } from 'vue'

const videoUrl = ref('https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv')  // 视频流
// const videoUrl = ref('')  // 视频流
import flvjs from 'flv.js' // 存储体

const flvPlayer = ref()
const flvshow = () => {
  if (flvjs.isSupported()) {
    const videoElement = document.getElementById('videoElement')  // 获取载体
    flvPlayer.value = flvjs.createPlayer({
      type: 'flv',
      url: videoUrl.value
    })
    flvPlayer.value.attachMediaElement(videoElement)
    flvPlayer.value.load()
    flvPlayer.value.play()
  }
}

const closeVideo = () => {
  if (flvPlayer.value) {
    flvPlayer.value.unload()
    flvPlayer.value.destroy()
    flvPlayer.value = null
  }
}

onBeforeUnmount(() => {
  closeVideo()
})

onMounted(() => {
  flvshow()
})

这样我们的视频就可以正常拉流播放了
在这里插入图片描述