本文小编为大家详细介绍“fiv.js怎么实现flv文件blob流实时播放”,内容详细,步骤清晰,细节处理妥当,希望这篇“fiv.js怎么实现flv文件blob流实时播放”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
过程
1、开端
说到实时播放,一般都是想到rtmp流,随便一搜帖子(忘记看帖子时间了),就能看到以下两个插件。
cnpm install video-js -S cnpm install videojs-flash -S
跟我印象中之前用的一模一样。
简单浏览了下帖子的使用过程,我就打算动手敲了。
2、出师不利
video-js还是能正常下载的,但到了video-js-flash就一直下载失败了。
这时我突然想起2020年12月,谷歌就不再支持flash插件了,这导致许多基于flash实现的视频流播放插件都失效,vue-video-player和vue-flash首当其冲。
3、峰回路转--参考旧项目
由于项目后台给我们提供了三种视频流,所以我们的选择也比较多。
同时因为是jsp旧项目改造成vue项目,我就想看看之前用的是什么插件,原来是flv.js。
这不就是小破站用的技术吗,纯js开发,没用到flash,这兼容性肯定更好吧。
4、flv.js
确定了所用插件,接下来的步骤就比较简单了,无非就是下载,引入,看例子写法照着抄就可以了。
cnpm i flv.js
下面提供一下demo,demo里是多个flv流多窗口播放的方式,如果只有一个flv需求播放,就简化一下就可以了,其他大家随便看看吧。
<template> <div> <div id="video-container"> <div class="video-box" v-for="(video,index) in videoList" :key="index"> <video :id="'video'+index" ref="videoElement" controls autoplay muted ></video> </div> </div> </div> </template> <script> import flvjs from 'flv.js' export default { data() { return { videoPlayer: null, videoList: [ { src: 'flv视频流地址' } ] }; }, mounted() { this.playVideo() }, methods: { playVideo(){ this.vloading = true; this.videoList.forEach((item,index) => { if (flvjs.isSupported()) { let player = null; let videoElement = document.getElementById("video" + index); player = flvjs.createPlayer({ type: "flv", //=> 媒体类型 flv 或 mp4 isLive: true, //=> 是否为直播流 hasAudio: false, //=> 是否开启声音 url: item.src, //=> 视频流地址 }); player.attachMediaElement(videoElement); //=> 绑DOM player.load(); player.play(); } else { this.$message.error('不支持flv格式视频') } this.vloading = false; }) }, }, }; </script> <style lang="scss" scoped> #video-container { } </style>
5、hls.js
业务是完成了,后续我也看了一下m3u8视频流的播放。
1.M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放 它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议
3.vue项目可采用的hls.js插件+video标签的形式。
原生video标签播放不了,但是我们可以借助hls.js的帮助,实现这个功能。
cnpm i -s hls.js
过程也是比较简单的,video标签提供一个ref,可供绑定选择元素就可以了,其他无所谓,hls.js会出手。
下面是源码,挑着用就行了
<template> <section> <video class="full-height full-width" ref="video" controls></video> </section> </template> <script> let Hls = require('hls.js'); export default { data() { return { hls: '', src: 'm3u8视频流地址' }; }, mounted() { this.getStream(src) }, methods: { videoPause() { if (this.hls) { this.$refs.video.pause(); this.hls.destroy(); this.hls = null; } }, getStream(source) { if (Hls.isSupported()) { this.hls = new Hls(); this.hls.loadSource(source); this.hls.attachMedia(this.$refs.video); this.hls.on(Hls.Events.MANIFEST_PARSED, () => { console.log('加载成功'); this.$refs.video.play(); }); this.hls.on(Hls.Events.ERROR, (event, data) => { // console.log(event, data); // 监听出错事件 console.log('加载失败'); }); } }, beforeDestroy() { this.videoPause(); } } }; </script>
6、rtmp流
基本上rtmp流都是需要flash环境才能播放了,目前市面上的插件可能有部分插件还支持,但是一般都是需要指定浏览器,兼容性极差。也有一种方案是自行搭建服务器,服务器转码变成图片,一帧一帧传给网页端,缺点是没有声音。