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

Posted 2023-03-03 David凉宸

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()
)

这样我们的视频就可以正常拉流播放了

这只是一种对接flv流格式的方法，下期我们会讲第二种方法哦！！！！
敬请期待！！！