赤峰微网站建设,网页设计图片怎么居中对齐,企业网站建设顾问,wordpress迁移到本地FLV 是FLASH VIDEO的简称#xff0c;FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快#xff0c;使得网络观看视频文件成为可能#xff0c;它的出现有效地解决了视频文件导入Flash后#xff0c;使导出的SWF文件体积庞大#xf… 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格式。 下面我们就来讲一讲如何对接吧
首先我们创建视频的载体
templatediv classhomevideo refvideoElementRef idvideoElement controls muted stylewidth: 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 vueconst 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流格式的方法下期我们会讲第二种方法哦 敬请期待
