vue + hls 循环实时监控视频（m3u8格式）列表

XiNGRZ 发布于2019-08-05 17:38 / 1896人阅读

摘要：默认已经安装好了，组件这里以为例，用什么库问题不大注循环这种实时视频的做法其实不推荐，但是你保不准，真的有这样的需要安装依赖使用循环渲染节点监控通道播放挂载节点，解析结构略节点挂载播放实时监控请求和心跳等涉及业务的略正常解

默认vue已经安装好了，UI组件这里以vux为例，用什么UI库问题不大
注：循环这种实时视频的做法其实不推荐，但是你保不准，真的有这样的需要

1. 安装依赖 hls.js

npm i hls.js -S

2. 使用 2.1 html 循环渲染video节点


  
    XX监控
    通道{{video.which}}
    播放

2.2 【js】hls挂载节点，解析

// 结构略
import Hls from "hls.js";

data() {
  return {
    videos: []
  }
},

methods: {
  // 节点挂载---$refs
  attach() {
    for (let index = 0; index < this.videos.length; index++) {
      if (Hls.isSupported()) {
        this.videos[index].hls = new Hls();
        this.videos[index].hls.attachMedia(this.$refs[this.videos[index].ref][0]);
      }
    }
  },

  // 播放实时监控
  playVideo(channel) {
    let _this = this;
    let videoRef = this.videos[channel-2].ref;
    this.$refs[videoRef][0].controls = "controls";
    // 请求和心跳等涉及业务的略
    _this.videos[channel-2].hls.loadSource(res.data.url);
    // 正常解析
    _this.videos[channel-2].hls.on(Hls.Events.MANIFEST_PARSED, function () {
      _this.$refs[videoRef][0].play()
    });
    // 失败
    _this.videos[channel-2].hls.on(Hls.Events.ERROR, function (event, data) {
      if (data.fatal) {
        switch(data.type) {
          // 网络错误导致的错误，据观察这种类型的错，占比最高
          case Hls.ErrorTypes.NETWORK_ERROR:
            // 根据自己业务（心跳/错误次数 需要加载还是重新请求，这里只给出简单的，加载情况作为示例）
            hls.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            // 多媒体错误
            hls.recoverMediaError();
            break;
          default:
            _this.videos[channel-2].hls.destroy();
            _this.$nextTick(() => {
            // 非网络或多媒体错误，重新获取url
             _this.playVideo(channel);
           })
           break;
        }
      }
    }
  }
}

// 选择生命周期（需要$el已经存在，mounted()或者keep-alive的activated()）
// 我这里使用的是activated()
activated(){
  // axios 请求略(这里演示用固定数量，通道从2开始)
  this.videos = [];
  for (let i = 0; i < 5; i++) {
    let item = {
      hls: null,
      ref: `video${i+2}`,
      which: i+2,
    }
    this.videos.push(item)
    this.$nextTick(() => {
      // 可以放到请求地址成功后面（推荐）
      this.attach()
    })
  }
}

// 销毁
deactivated() {
  for (let i = 0; i < this.videos.length; i++) {
    this.videos[i].hls.destroy();
  }
}

服务器托管云服务器如何用vue开发实时音视频 vue+webrtc实现实时视频通话,语音通话 vue 集成webrtc实时音视频demo 交通实时监控视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59749.html

vue + hls 循环实时监控视频（m3u8格式）列表

摘要：默认已经安装好了，组件这里以为例，用什么库问题不大注循环这种实时视频的做法其实不推荐，但是你保不准，真的有这样的需要安装依赖使用循环渲染节点监控通道播放挂载节点，解析结构略节点挂载播放实时监控请求和心跳等涉及业务的略正常解默认vue已经安装好了，UI组件这里以vux为例，用什么UI库问题不大注：循环这种实时视频的做法其实不推荐，但是你保不准，真的有这样的需要 1. 安装依赖 hls....

yedf 2019-08-26 18:37 评论0 收藏0
【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

摘要：对于视频播放，可以使用协议播放直播流，和都天然支持这种协议，配置简单，直接使用标签即可。什么是简称是开发的一套视频直播协议，现在属于。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火，再不学就 out 了。为了紧跟潮流，本文将向大家...

cgspine 2019-08-02 18:50 评论0 收藏0
【腾讯Bugly干货分享】从0到1打造直播 App

摘要：流媒体服务器端用来接受视频录制端提供的视频源，同时提供给视频播放端流服务。支持该协议即，是由苹果提出基于的流媒体传输协议。更多配置可以参考下面是的配置文件腾讯云直播后台主要是调用腾讯云。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/5811d... 作者：李智文概要分享内容：互联网内容载体变迁历程，文字——...

Ku_Andrew 2019-07-16 16:15 评论0 收藏0
关于直播视频格式和浏览器兼容性历史的来龙去脉

摘要：和格式的浏览器兼容性移动端因为苹果公司对的强烈抵制以及自己定的视频协议，所以在端原生支持格式的视频播放而不支持的播放，而且因为苹果在移动端的领头作用，所以其他移动端包括浏览器也都原生支持格式的视频播放。因为误打误撞来到了淘宝直播团队，从开始完全不了解直播技术，现在因为leader暂时的离开，准备接手h5播放器的迭代，就不得不开始了解相关的视频技术，先整理一下在直播技术中的视频格式和不...

you_De 2019-08-20 15:54 评论0 收藏0
关于直播视频格式和浏览器兼容性历史的来龙去脉

摘要：和格式的浏览器兼容性移动端因为苹果公司对的强烈抵制以及自己定的视频协议，所以在端原生支持格式的视频播放而不支持的播放，而且因为苹果在移动端的领头作用，所以其他移动端包括浏览器也都原生支持格式的视频播放。因为误打误撞来到了淘宝直播团队，从开始完全不了解直播技术，现在因为leader暂时的离开，准备接手h5播放器的迭代，就不得不开始了解相关的视频技术，先整理一下在直播技术中的视频格式和不...

Prasanta 2019-07-16 16:16 评论0 收藏0