前端播放直播视频流(flv+m3u8)

最近公司接的项目中需要播放摄像头画面,这里主要有两种摄像头

  • 萤石摄像头:提供的视频流地址是flv格式
  • 乐橙摄像头:提供的视频流是么m3u8格式

前端无法直接使用video标签进行视频流的播放,因此我们需要借助一些库,由于不同的视频流格式需要的库也不同,所以我们开始前先确定视频流的格式

javascript 复制代码
https://**********/*****/**/**.m3u8?proto=https
https://****/***/**/****.flv?**=**&**=**&*=***&*=**

//上面分别是两种视频流格式,我们可以看到地址中是带有视频流格式的

下面是html结构

html 复制代码
<video
    :id="d.id"
    class="video-js vjs-default-skin vjs-big-play-centered"
    autoplay
    controls
    preload="auto"
    width="100%"
    height="100%"
    data-setup="{}">
  <source id="source" :src="d.value" type="application/x-mpegURL"/>
</video>

1 flv格式 对于flv格式我这里使用的是flv.js这个库来实现的

js 复制代码
if (flvjs.isSupported()) {
    //检查当前浏览器是否支持 flv.js
  var videoElement = document.getElementById(this.d.id);
  
  //创建一个 flv.js 播放器实例
  this.d.flvPlayer = flvjs.createPlayer({
    type: "flv",//指定视频类型
    isLive: true,//标记视频流是否为直播流
    hasAudio: false,//标记视频流是否包含音频轨道
    url: this.d.value, //视频流的 URL 地址
  });
  //使用 `attachMediaElement()` 方法将视频元素与 flv.js 播放器关联起来
  this.d.flvPlayer.attachMediaElement(videoElement);
  
  //加载视频流
  this.d.flvPlayer.load();
  
  //开始播放视频
  this.d.flvPlayer.play();
}

------------------------------------------------------------------------------------------------------

//销毁
  this.d.flvPlayer.destroy()

2.m3u8格式 对于m3u8格式我这里使用的是videojs实现

js 复制代码
this.d.flvPlayer = videojs(this.d.id, {
  bigPlayButton: true,//是否显示大播放按钮
  textTrackDisplay: false,//是否显示字幕轨道
  posterImage: false,//是否显示海报图片
  errorDisplay: false,//是否显示错误信息
  autoplay: true,//是否自动播放视频
})

//这里注意将视频流地址设置给this.d.value

------------------------------------------------------------------------------------------------------

//卸载
  this.d.flvPlayer.dispose()

我这里还对接了海康的摄像头,给的视频流格式是flv的,其实这个格式可以沟通的,如果是上面两种摄像头,基本上固定了格式,但是海康的可以与其他开发人员沟通给你需要的格式。

相关推荐
abigale037 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者27 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile31 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399733 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊39 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火39 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能