关于使用video js插件的坑作者用的m3u8视频流一个页面展示多个视频自动播放

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量3.6k 收藏 2
点赞数
文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48194540/article/details/123900645
版权

废话不多说

下载并引用

import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";

video js插件是跟据他来插入dom进行视频的渲染

            <video
              :id="'video' + item.channelId"
              ref="videos"
              class="video video-js vjs-big-play-centered"
            >
              <source
                :id="'video' + item.channelId"
                src=""
                type="application/x-mpegURL"
              />
            </video>
  data() {
    return {
      timeMU: null,
      videoOptions: {
        autoplay: true,
        muted: true, //默认情况下消除任何音频
        controls: true,
        poster: "",
        sources: [
          {
            src: "",
            type: "application/x-mpegURL",
          },
        ],
      },
      player: [], //存储video 实列
      vldeoArr: [],
      channelIds: [], //id  用来获取视频
      imgUrl: require("@/assets/no-photo.png"),
    };
  },

下面我把我的代码全部贴出,说一下我页面的逻辑我这个也页面是用的组件写法,获取父组件获取来的videoList视频列表,根据视频列表的channelId来进行mutiRtspAndM3u8接口请求返回过来的是视频的url地址

但是后端有问题mutiRtspAndM3u8这个接口咩有处理好,就是说我传入9个channelId按道理他应该给我9个视频的url.....但是重点来了他返回来的有一下集中可能,一,返回来data里面只有3个,还有6个没有返回来..并且data里面的3个里面不一定都有url.可能有,可能没有,如果没有的话就接着发送这个请求,直到获取到,或者就是跳转到下一页就取消定时器...

下面是我视频播放的方法

    // 视频播放
    async getMuVideo(ids) {
      let _this = this;
      await mutiRtspAndM3u8(ids, this).then((res) => {
        this.$nextTick(async () => {
          // 清除m3u8定时器
          if (this.timeMU) {
            clearInterval(this.timeMU);
            this.timeMU = null
          }
          let arr = res.data.data;
          let bool = true; //用来判断 url  是否全部有值
          let urlArr = [];
          arr.forEach((item, index) => {
            if (item.visitUrl) {
              // 拿到所有的url去和视频列表里面判断,如果视频列表里面的是离线OFFLINE就改为在线ONLINE状态
              _this.videoList.forEach((v) => {
                //  && v.status == "OFFLINE"
                if (item.channelId == v.channelId) {
                  // v.status = "ONLINE";
                  v.loading = false;
                  if(v.status != "OFFLINE"){
                  }
                  // this.getVideoList()
                  // 因为上一步有了url视频地址,虽然这次判断更改了dom的显示,但是还是无法赋值url
                }
              });
              this.$nextTick(() => {
                let videoOptions = JSON.parse(
                  JSON.stringify(this.videoOptions)
                );
                videoOptions.sources[0].src =
                  _this.GLOBAL.BASE_URL + item.visitUrl;

                let dom =
                  "<video  id=" +
                  "video" +
                  item.channelId +
                  ' class="video-js vjs-default-skin" controls style="width:100%;height:100%"></video>';
                this.$refs["videoDiv" + item.channelId][0].innerHTML = dom;
                this.$forceUpdate();
                this.player.push(
                  videojs("video" + item.channelId, videoOptions)
                );
              });
            } else {
              bool = false;
              urlArr.push(Number(item.channelId));
            }
          });
          // channelIds 与  返回来的视频不匹对。那就把剩余的id再去发送请求
          if (this.channelIds.length != arr.length) {
            let muidArr = arr.map((item) => Number(item.channelId));
            let idArr = this.getArrDifference(this.channelIds, muidArr);
            urlArr = [...idArr, ...urlArr];
            // console.log(urlArr);
          }
          if (!bool || this.channelIds.length != arr.length) {
            let arr = urlArr.map((item) => {
              return {
                channelId: item,
              };
            });
            // console.log(arr);
            this.channelIds = urlArr;
            this.timeMU = null
            this.timeMU = setInterval(async () => {
              await this.getMuVideo(arr);
            }, 3000);
          }
        });
      });
    },

然后那又有一个需求,在videoList视频列表有离线和在线状态,html上根据videoList视频列表返回来的data判断显示视频和不显示视频

     <div style="position: relative">
          <!-- 在线 -->
          <div
            @click="lookVideo(item.channelId, item.status, item.channelName)"
            element-loading-background="rgba(0, 0, 0, 0.1)"
            v-loading="item.loading"
            :style="height"
            :ref="'videoDiv' + item.channelId"
            v-show="item.status == 'ONLINE'"
          >
            <video
              :id="'video' + item.channelId"
              ref="videos"
              class="video video-js vjs-big-play-centered"
            >
              <source
                :id="'video' + item.channelId"
                src=""
                type="application/x-mpegURL"
              />
            </video>
          </div>
          <!-- 离线 -->
          <div
            @click.self="
              lookVideo(item.channelId, item.status, item.channelName)
            "
            :style="height"
            v-show="item.status == 'OFFLINE'"
            class="backgc-content"
          >
            <el-image
              style="width: 50%; height: 50%"
              :src="imgUrl"
              fit="fill"
            ></el-image>
          </div>
          <!-- 最下方 -->
          <div class="videoTitle" v-if="cameraname">
            <span style="color: #ffffff"
              >[{{ item.channelId }}] {{ item.channelName }}</span
            >
            <div style="position: absolute; left: 80%">
              <div>
                <i
                  :class="{
                    'el-icon-success': item.status == 'ONLINE',
                    'el-icon-error': item.status == 'OFFLINE',
                  }"
                ></i
                ><span
                  :class="{
                    online: item.status == 'ONLINE',
                    offline: item.status == 'OFFLINE',
                  }"
                  >{{ item.status == "ONLINE" ? "在线" : "离线" }}</span
                >
              </div>
            </div>
          </div>
        </div>

离线状态里没有cideo标签就无法展示视频

意思是我9个channelId里面有离线的和没离线的都去请求了,渲染的时候肯定是离线是没办法渲染上的,然后我根据判断假如离线的channelId为5,5的url回来了,我就把videoList的离线状态改成在线,然后在线的html就有video标签了,...现在问题来了,这个判断是在有这个5的url时候进行判断的,所以他已经有url了已经用video js插入dom进行渲染了

就算if了也是无法显示,所以逻辑有问题,没法进行.搞不懂为啥离线的也要发送请求,接通视频后撒撒刷新页面不就可以了

下面我把带吗全部贴出看你们可以看的懂吗,然后销毁这个video js标签也有问题,解决是插入daom元素

<template>
  <div>
    <el-row style="margin-top: 20px">
      <el-col
        v-for="(item, index) of vldeoArr"
        :key="index"
        :span="span"
        style="border: 2px solid #344563"
      >
        <div style="position: relative">
          <!-- 在线 -->
          <div
            @click="lookVideo(item.channelId, item.status, item.channelName)"
            element-loading-background="rgba(0, 0, 0, 0.1)"
            v-loading="item.loading"
            :style="height"
            :ref="'videoDiv' + item.channelId"
            v-show="item.status == 'ONLINE'"
          >
            <video
              :id="'video' + item.channelId"
              ref="videos"
              class="video video-js vjs-big-play-centered"
            >
              <source
                :id="'video' + item.channelId"
                src=""
                type="application/x-mpegURL"
              />
            </video>
          </div>
          <!-- 离线 -->
          <div
            @click.self="
              lookVideo(item.channelId, item.status, item.channelName)
            "
            :style="height"
            v-show="item.status == 'OFFLINE'"
            class="backgc-content"
          >
            <el-image
              style="width: 50%; height: 50%"
              :src="imgUrl"
              fit="fill"
            ></el-image>
          </div>
          <!-- 最下方 -->
          <div class="videoTitle" v-if="cameraname">
            <span style="color: #ffffff"
              >[{{ item.channelId }}] {{ item.channelName }}</span
            >
            <div style="position: absolute; left: 80%">
              <div>
                <i
                  :class="{
                    'el-icon-success': item.status == 'ONLINE',
                    'el-icon-error': item.status == 'OFFLINE',
                  }"
                ></i
                ><span
                  :class="{
                    online: item.status == 'ONLINE',
                    offline: item.status == 'OFFLINE',
                  }"
                  >{{ item.status == "ONLINE" ? "在线" : "离线" }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  rtspAndM3u8,
  getRtspAndM3u8,
  mutiRtspAndM3u8,
} from "@/api/videoSquare.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
export default {
  name: "videps",
  props: {
    // 宫格
    spanNum: {
      type: Number,
      default: 1,
    },
    //多少页
    currentPage: {
      type: Number,
      default: 1,
    },
    //获取的id 根据id用来请求视频流
    videoList: {
      type: Array,
      default: () => [],
    },
    // 摄像头是否显示
    cameraname: {
      type: Boolean,
      default: true,
    },
    // 父组件的方法
    getVideoList: {
      type: Function,
      default: null,
    },
  },
  computed: {
    height() {
      let num = Math.sqrt(this.spanNum);
      let h = "550px";
      if (this.spanNum == 12) {
        num = 3;
      }
      if (this.$store.getters.flagName) {
        h = "85vh";
      }
      return {
        height: `calc(${h} / ${num})`,
        width: "100%",
      };
    },
    span() {
      let num = Math.sqrt(this.spanNum);
      if (this.spanNum == 12) {
        num = 4;
      }
      return 24 / num;
    },
  },
  data() {
    return {
      timeMU: null,
      videoOptions: {
        autoplay: true,
        muted: true, //默认情况下消除任何音频
        controls: true,
        poster: "",
        sources: [
          {
            src: "",
            type: "application/x-mpegURL",
          },
        ],
      },
      player: [], //存储video 实列
      vldeoArr: [],
      channelIds: [], //id  用来获取视频
      imgUrl: require("@/assets/no-photo.png"),
    };
  },
  mounted() {},
  methods: {
    //点击播放视频
    lookVideo(channelId, status, channelName) {
      // return;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.3)",
        target: document.querySelector(".click_" + channelId),
      });

      let data = {
        channelId: channelId,
      };
      rtspAndM3u8(data)
        .then((res) => {
          if (res.data.code == 200) {
            let visitUrl = res.data.data.visitUrl;
            //请求地址不为空
            if (visitUrl != null) {
              this.visitUrl = this.GLOBAL.BASE_URL + visitUrl;
              // this.visitUrl = res.data.data.visitUrl;
              loading.close();
              this.$router.push({
                name: "videoPlay",
                query: {
                  channelId: channelId,
                  channelName: channelName,
                  visitUrl: this.visitUrl,
                },
              });
            } else {
              //请求地址为空
              let _this = this;
              _this.playTimer = setInterval(function () {
                //获取m3u8播放地址
                let params = {
                  channelId: channelId,
                };
                getRtspAndM3u8(params)
                  .then((res) => {
                    if (res.data.code == 200) {
                      let visitUrl = res.data.data;
                      if (visitUrl != null) {
                        _this.visitUrl = _this.GLOBAL.BASE_URL + visitUrl;
                        // loading.close();
                        clearInterval(_this.playTimer);
                        _this.playTimer = null;
                        _this.$router.push({
                          name: "videoPlay",
                          query: {
                            channelId: channelId,
                            channelName: channelName,
                            visitUrl: _this.visitUrl,
                          },
                        });
                      } else {
                        _this.$message.error(res.data.msg);
                        return false;
                      }
                    } else {
                      // _this.$message.error(res.data.msg);
                      //清除延迟定时器
                      /*clearInterval(this.playTimer);
                    this.playTimer = null;
                    return false;*/
                    }

                    if (status == "OFFLINE") {
                      // _this.$message.error(res.data.msg);
                      loading.close();
                      return false;
                    }
                  })
                  .catch((error) => {});
              }, 5000);
            }
          } else {
            this.$message.error(res.data.msg);
            return false;
          }
        })
        .catch((error) => {});
    },

    Destroy() {
      // 销毁视频实例
      if (this.player.length) {
        this.player.forEach((item) => {
          item.dispose();
        });
        this.player = [];
      }
    },
    // 父组件keepalive钩子函数离开页面调用
    keepDestory(){
      if (this.timeMU) {
        clearInterval(this.timeMU);
        this.timeMU = null
      }
      this.Destroy(); //销毁视频实例
    },
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 取消请求
    cancelQuest() {
      if (typeof this.source === "function") {
        // console.log("取消上一次请求");
        this.source("终止请求"); //取消请求
      }
    },
    // 视频播放
    async getMuVideo(ids) {
      let _this = this;
      await mutiRtspAndM3u8(ids, this).then((res) => {
        this.$nextTick(async () => {
          // 清除m3u8定时器
          if (this.timeMU) {
            clearInterval(this.timeMU);
            this.timeMU = null
          }
          let arr = res.data.data;
          let bool = true; //用来判断 url  是否全部有值
          let urlArr = [];
          arr.forEach((item, index) => {
            if (item.visitUrl) {
              // 拿到所有的url去和视频列表里面判断,如果视频列表里面的是离线OFFLINE就改为在线ONLINE状态
              _this.videoList.forEach((v) => {
                //  && v.status == "OFFLINE"
                if (item.channelId == v.channelId) {
                  // v.status = "ONLINE";
                  v.loading = false;
                  if(v.status != "OFFLINE"){
                  }
                  // this.getVideoList()
                  // 因为上一步有了url视频地址,虽然这次判断更改了dom的显示,但是还是无法赋值url
                }
              });
              this.$nextTick(() => {
                let videoOptions = JSON.parse(
                  JSON.stringify(this.videoOptions)
                );
                videoOptions.sources[0].src =
                  _this.GLOBAL.BASE_URL + item.visitUrl;

                let dom =
                  "<video  id=" +
                  "video" +
                  item.channelId +
                  ' class="video-js vjs-default-skin" controls style="width:100%;height:100%"></video>';
                this.$refs["videoDiv" + item.channelId][0].innerHTML = dom;
                this.$forceUpdate();
                this.player.push(
                  videojs("video" + item.channelId, videoOptions)
                );
              });
            } else {
              bool = false;
              urlArr.push(Number(item.channelId));
            }
          });
          // channelIds 与  返回来的视频不匹对。那就把剩余的id再去发送请求
          if (this.channelIds.length != arr.length) {
            let muidArr = arr.map((item) => Number(item.channelId));
            let idArr = this.getArrDifference(this.channelIds, muidArr);
            urlArr = [...idArr, ...urlArr];
            // console.log(urlArr);
          }
          if (!bool || this.channelIds.length != arr.length) {
            let arr = urlArr.map((item) => {
              return {
                channelId: item,
              };
            });
            // console.log(arr);
            this.channelIds = urlArr;
            this.timeMU = null
            this.timeMU = setInterval(async () => {
              await this.getMuVideo(arr);
            }, 3000);
          }
        });
      });
    },
  },
  beforeDestroy() {
    if (this.timeMU) {
      clearInterval(this.timeMU);
      this.timeMU = null
    }
    this.Destroy();
  },
  watch: {
    videoList: {
      async handler(val) {
        this.cancelQuest(); // 请求发送前调用  切换栅格时  把之前的接口清空
        await this.Destroy();
        this.channelIds = [];
        this.vldeoArr = val;
        let arrId = [];
        // 判断是否离线 只取在线  改为不判断离线和不离线都发请求
        this.vldeoArr.forEach((item) => {
          //  console.log(this.$refs["videoDiv" + item.channelId]);
          item.loading = true;
          arrId.push({ channelId: item.channelId });
          this.channelIds.push(Number(item.channelId));
        });
        this.$forceUpdate();
        if (arrId.length) {
          this.getMuVideo(arrId);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
.video {
  width: 100%;
  height: 100%;
}
.backgc-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  // height: 306px;
  text-align: center;
}
/*标题样式*/
.videoTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 93%;
  position: absolute;
  bottom: 15px;
  left: 20px;
  span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }

  div {
    /*在线icon样式*/
    .el-icon-success:before {
      font-size: 12px;
      color: #4cd964;
      margin-right: 5px;
    }

    .el-icon-error:before {
      font-size: 12px;
      color: #ff3a3a;
      margin-right: 5px;
    }

    span.online {
      font-size: 12px;
      color: #4cd964;
    }

    span.offline {
      font-size: 12px;
      color: #ff3a3a;
    }
  }
}
</style>

不喜勿喷,多交流多探讨

z遥不可及
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue通过video.js解决m3u8视频播放格式的方法
12-10
前言 今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
vue m3u8视频播放 单个视频和多个视频处理
沃德天，倪维胜么，捺莫帅？
11-09 2778
文章目录使用方式组件 npm install video.js 使用方式 《组件》组件在下方 // 单个视频 <videojs :src="url"/> // 多个视频 <div v-for="item in list" :key="item.id" class="count" > <videojs :src="item.url" :val="item.id" /> </div&
Chrome 使用video.js 无法播放Hls 直播源的视频
weixin_42758129的博客
12-22 5937
##Chrome 使用video.js 无法播放Hls 直播源的视频 首先：下载video.js 下载地址：http://www.jq22.com/jquery-info404 打开index.html文件 官方demo中 MP4格式的能够播放 但是改成CCTV1 的Hls直播源时 却没有不能够加载视频，郁闷ing~~ Hls是基于H5的视频播放（Ps:如果不支持H5就使用提醒Flash播放）...
vue中使用video.js，且可以截图、录制和下载视频
weixin_44042792的博客
03-13 808
1. 安装video.js。
Vue项目使用Video.js播放m3u8格式音（视）频流
weixin_58860430的博客
03-30 5006
记录工作中遇到的问题 需求：点击播放按钮显示弹层，在弹层上播放m3u8格式的音频流 效果如下： 点击父组件的播放按钮 弹层显示出来，播放音频流（背景图片是我自己加的） 使用步骤： 1.安装video.js和videojs-contrib-hls npm i video.js npm i videojs-contrib-hls 2.组件中引入 import videojs from 'video.js' import 'video.js/dist/video-js...
iOS使用百度图像识别
wtl1804的博客
01-19 701
本次博客讲述在iOS下如何使用百度的图像识别。 access_token 首先你得在百度AI开放平台里注册账号。创建app等步骤，官网里有，然后就是 利用这俩个key来请求你的access_token.这个玩意在所有的开放能力里都要用到。请求这个也有详细的步骤。 利用postman检测是否能请求成功 也可以跳过这一步，直接在xcode开写。 按照他的提示，在postman里填入信息，url很长，...
video.js 一个页面同时播放多个视频的实例代码
10-17
主要介绍了video.js 一个页面同时播放多个视频的实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
HTML mp4 视频播放问题
GAVIN
06-30 735
HTML mp4 视频播放问题
nginx上搭建HLS流媒体服务器
热门推荐
cjsafty的专栏
08-30 5万+
简介：HTTP Live Streaming（缩写是 HLS）是一个由苹果公司提出的基于HTTP的流媒体 网络传输协议。 是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速 率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个
谷歌浏览器播放海康威视监控
大海1010
04-15 1万+
1：下载ffmpeg 官网：http://ffmpeg.org/ 解压后,电脑右键属"属性"选择“高级系统属性”下在“环境变量”中的【PATH】路径追加 “c:\ffmpeg\bin;” 2：利用ffmpeg将RTSP视频转成HLS ffmpeg -i rtsp://用户名:密码@IP地址:554/H.264/ch1/main/av_stream -fflags flush_packets ...
详细解释PHP中header和content-type参数
Technology world
11-04 2340
void header ( string string [, bool replace [, int http_response_code]] )void header ( string string [, bool replace [, int http_response_code]] )header()是用来发送 HTTP Header的。replace是个可选的参
Vue结合Video.js播放m3u8视频流的方法示例
10-18
本篇文章主要介绍了Vue+Video.js播放m3u8视频流的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
video标签播放m3u8视频流需要的hls.js文件
10-23
video标签播放m3u8格式视频流需要的hls.js文件,video标签播放m3u8格式视频流完整代码可在本人博客中查看
流视频下载合并插件Free m3u8 Video Downloader
12-13
流视频下载合并插件Free m3u8 Video Downloader，下载网页视频,m3u8,flv,mp4,流视频
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 618
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 362
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 249
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 272
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 342
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
uniapp项目引入dplayer.js以及hls.js用来解析播放m3u8直播流视频文件
09-04
在Uniapp项目中引入dplayer.js和hls.js可以实现解析和播放m3u8直播流视频文件，具体步骤如下： 1. 首先，将dplayer.js和hls.js的相关文件引入到Uniapp项目中。可以通过npm安装这些库文件，也可以将它们下载到本地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值