vue的m3ub视频播放，可翻页，四个视频播放器同时播放

已于 2022-12-01 13:25:36 修改
阅读量1.4k 收藏 4
点赞数 2
分类专栏： vue 文章标签： vue.js 音视频 javascript
于 2022-12-01 09:13:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46124693/article/details/128126047
版权

在这里插入图片描述

这块我用的是组件，有些组件传值和组件调用方法

<template>
  <div class="block">

    <div>
      <!-- <span>
      当前第{{ FactoryVideosObj.currentpage }}页/共{{
        FactoryVideosObj.totalpage
      }}页
    </span> -->
    <button v-if="fanhui" class="button topbutton" @click="goback">返回</button>
    <div v-else @click="to('/risk-warning-video?facID=' + facID)">
      <i class="el-icon-copy-document icon-sy"></i>
    </div>
    <!-- <el-carousel
      indicator-position="none"
      :autoplay="false"
      trigger="click"
      @change="changeFn"
      :height="type == 3 ? '600px' : ''"
    >
    
      <el-carousel-item v-for="(item,i) in Number(FactoryVideosObj.totalpage) ?  Number(FactoryVideosObj.totalpage) : 1" :key="i">
        <div class="video_box" style="height:100%;" >
          <div style="display:flex;flex-wrap:wrap;height:100%;">
            <video controls id="myVideo1" :style="height == '400px' ? 'height:100%':'height:50%'" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
              <source :src="FactoryVideosObj.video1" width="100%" height="220" type="application/x-mpegURL" />

            </video>
            <video controls id="myVideo2" :style="height == '400px' ? 'height:100%':'height:50%'" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
              <source :src="FactoryVideosObj.video2" height="220" type="application/x-mpegURL" />

            </video>
            <video controls id="myVideo3" :style="height == '400px' ? 'height:100%':'height:50%'" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
              <source :src="FactoryVideosObj.video3" height="220" type="application/x-mpegURL" />

            </video>
            <video controls id="myVideo4" :style="height == '400px' ? 'height:100%':'height:50%'" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
              <source :src="FactoryVideosObj.video4" height="220" type="application/x-mpegURL" />

            </video>
        </div> -->
          <!-- <video controls >
            <source
              :src="FactoryVideosObj.video1"
              :height="height"
              type="video/mp4"
            />
            <source src="movie.ogg" :height="height" type="video/ogg" />
          </video>
          <video  controls :style="height == '400px' ? 'height:100%':''">
            <source
              :src="FactoryVideosObj.video2"
              :height="height"
              type="video/mp4"
            />
            <source src="movie.ogg" :height="height" type="video/ogg" />
          </video>
          <video  controls :style="height  == '400px'? 'height:100%':''">
            <source
              :src="FactoryVideosObj.video3"
              :height="height"
              type="video/mp4"
            />
            <source src="movie.ogg" :height="height" type="video/ogg" />
          </video>
          <video  controls :style="height == '400px'? 'height:100%':''">
            <source
              :src="FactoryVideosObj.video4"
              :height="height"
              type="video/mp4"
            />
            <source src="movie.ogg" :height="height" type="video/ogg" />
          </video> -->
        <!-- </div>
      </el-carousel-item>
    </el-carousel> -->
    <div class="video_box">
      <div id="video_box_cont" style="display:flex;flex-wrap:wrap" v-html="dom">
          <!-- <video controls id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" height="220" type="application/x-mpegURL" />

          </video> -->
         
      </div>
      <div class="text">
       <i class="el-icon-caret-left" @click="next2"></i> 第 {{FactoryVideosForm.currentPage + 1}} 页，共 {{totalpage}} 页 <i class="el-icon-caret-right" @click="next1"></i><div>共 {{this.FactoryVideosObj.totalvideo}} 条</div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import '@/styles/video.css'
import videojs from "video.js";
import "videojs-contrib-hls";
import { FactoryVideos, HroomVideos , getVideoList } from "@/api/enterprise";
export default {
  name: "tabsvideo",
  data() {
    return {
      // 企业监控—右侧视频列表
      FactoryVideosObj: {
        // currentpage:0,
      },
      FactoryVideosForm: {
        currentPage: 0,
        opt: 'next',
      },
      totalpage: 0,
      facID: "",
      myVideo1:null,
      myVideo2:null,
      myVideo3:null,
      myVideo4:null,
      dom:''
    };
  },
  props: {
    type: [Number, String],
    height:{
      type:[Number,String],
      default: '220px'
    },
    fanhui:{
      type:[Number,Boolean],
      default:false
    },
  },

  created() {
    this.getFunc();
    
  },
  mounted() {
   
  },
  destroyed(){
    this.disposeFn()
  },
  methods: {
 
    disposeFn(){
  
      this.myVideo1.dispose(),
      this.myVideo2.dispose(),
      this.myVideo3.dispose(),
      this.myVideo4.dispose(),
      

      this.dom = `
      
         <video controls id="myVideo1" autoplay muted style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video1 || ''}" width="100%"  height="220" type="application/x-mpegURL" />

          </video>
          <video controls id="myVideo2" autoplay muted style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video2 || ''}" width="100%" height="220" type="application/x-mpegURL" />

          </video>
          <video controls id="myVideo3" autoplay muted style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video3 || ''}" width="100%" height="220" type="application/x-mpegURL" />

          </video>
          <video controls id="myVideo4" autoplay muted style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video4 || ''}" width="100%" height="220"  height="220" type="application/x-mpegURL" />
          </video>
      
      `

      this.initFn()
    },

    to(url) {
      this.$router.push("/enterprise" + url);
    },
    getFunc() {
      this.$on("video", (res) => {
        // callMethod我们在父组件定义的方法名
        // 企业监控—危险源/反馈数(危险区域基本信息)
        if (res.init) {
            this.FactoryVideosForm.currentPage = 0
        }
        if(res.treeid){
          if(this.type == 3){
            this.FactoryVideosForm.facid = res.treeid
          }else {
            this.FactoryVideosForm.facID = res.treeid;
          }
        }
        if(res.hRoomLocation){
          this.FactoryVideosForm.hRoomLocation = res.hRoomLocation;
        }
        if(res.opt){
          this.FactoryVideosForm.opt = res.opt;
        }
        if(res.time){
          this.FactoryVideosForm.createDate = res.time;
        }

        this.facID = res.treeid;
        console.log(this.FactoryVideosForm);
        // 企业监控—右侧视频列表
        this.getList('init');
      });
    },
    changeFn(val) {
     
      this.FactoryVideosForm.currentPage = val;
      this.getList();
    },
    getList(type) {
      if(type == 'init'){
   
         this.dom = `
      
         <video controls autoplay muted  id="myVideo1" style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video1 || ''}" width="100%"  height="220" type="application/x-mpegURL" />

          </video>
          <video controls autoplay muted id="myVideo2" style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video2 || ''}" width="100%" height="220" type="application/x-mpegURL" />

          </video>
          <video controls autoplay muted id="myVideo3" style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video3 || ''}" width="100%" height="220" type="application/x-mpegURL" />

          </video>
          <video controls autoplay muted id="myVideo4" style="height:${this.height};width:50%" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
            <source src="${this.FactoryVideosObj.video4 || ''}" width="100%" height="220"  height="220" type="application/x-mpegURL" />
          </video>
      
      `
      

      }
      if (this.type == 1) {
        FactoryVideos(this.FactoryVideosForm).then((res) => {
           this.FactoryVideosObj = res.data;
           this.initFn(type)
         
          this.totalpage = res.data.totalpage;
        });
      } else if (this.type == 2) {
        HroomVideos(this.FactoryVideosForm).then((res) => {
          this.FactoryVideosObj = res.data;
          this.initFn(type)
          
       
          this.totalpage = res.data.totalpage;
        });
      } else if(this.type == 3){
        getVideoList(this.FactoryVideosForm).then((res) => {
          this.FactoryVideosObj = res.data;
          this.initFn(type)

          this.totalpage = res.data.totalpage;

     
        });
      }
    },
    initFn(type){
        if(type == 'init'){
          this.myVideo1 = videojs('myVideo1', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        this.myVideo2 = videojs('myVideo2', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        this.myVideo3 = videojs('myVideo3', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        this.myVideo4 = videojs('myVideo4', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })

        this.$nextTick(()=>{
          var myVideo1 = document.getElementById('myVideo1')
          var myVideo2 = document.getElementById('myVideo2')
          var myVideo3 = document.getElementById('myVideo3')
          var myVideo4 = document.getElementById('myVideo4')

          myVideo1.children[0].style.width = '100%'
          myVideo2.children[0].style.width = '100%'
          myVideo3.children[0].style.width = '100%'     
          myVideo4.children[0].style.width = '100%'

          myVideo1.children[0].style.height = '100%'
          myVideo2.children[0].style.height = '100%'
          myVideo3.children[0].style.height = '100%'     
          myVideo4.children[0].style.height = '100%'
        })
      }
     
      for(var i =0;i<4;i++){
        if(this.FactoryVideosObj['video' + (i + 1)]){
          if (/\.m3u8$/.test(this.FactoryVideosObj['video' + (i + 1)])) { //判断视频源是否是m3u8的格式
            this['myVideo' + (i + 1)].src({
                src: this.FactoryVideosObj['video' + (i + 1)],
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
          } else {
              this['myVideo' + (i + 1)].src(this.FactoryVideosObj['video' + (i + 1)])
          }
          
        }else{
          // 如果没有视频源就清除一下播放器
         	this['myVideo' + (i + 1)].src({
                src: '',
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        }

         
      }
    },
    goback(){
      this.$emit('fanhuiFn')
    },
    next1(){
      console.log(this.FactoryVideosForm.currentPage < Number(this.totalpage) - 1)
      if(this.FactoryVideosForm.currentPage < Number(this.totalpage) - 1){
        this.FactoryVideosForm.currentPage = this.FactoryVideosForm.currentPage + 1
        this.getList()
      }else{
        this.FactoryVideosForm.currentPage = Number(this.totalpage) - 1
      }
    },
    next2(){
      if(this.FactoryVideosForm.currentPage > 0){
        this.FactoryVideosForm.currentPage = this.FactoryVideosForm.currentPage - 1
        this.getList()
      }else{
        this.FactoryVideosForm.currentPage = 0
      }
    }
   
  },
};
</script>

<style lang="less" scoped>
#myVideo1,
#myVideo2,
#myVideo3,
#myVideo4{
    width: 50%;
    height: 200px;
    // margin-right: 5px;
    video{
      max-height: 400px;
      width:100%;
    }
}



.text{
      display: flex;
      align-items: center;
      margin-top: 10px;
      font-size: 16px;
      i{
        font-size: 20px !important;
        margin: 0 10px;
        cursor: pointer;
      }
    }

  

.icon-sy {
  position: absolute;
  right: 20px;
  top: -15px;
  font-size: 20px;
}
.icon-sy:hover {
  cursor: pointer;
  color: var(--theme);
}
</style>
伴梦123
关注
专栏目录
vue2/3 - 最新详细实现免费在线播放 flv | hls 格式视频地址，vue在线同时播放flv和hls两种或更多视频流地址及分块展示，vue播放flv，vue播放hls（m3u8）同时播放多种
高级前端工程师
07-11 2347
vue2，vue3，nuxt.js，视频播放器，flv，hls，视频格式，vue同时播放flv和hls视频流，如何同时播放多种视频格式，西瓜视频，免费，vue flv和hls兼容的播放器，支持video视频插件播放flv格式的视频文件，vue如何播放hls格式的在线视频，视频地址，播放地址，url播放，一个视频地址在线播放，视频播放，推流，m3u8和flv视频播放，组件，最好用的视频播放器免费插件，详细教程，手机，pc电脑，输入播放地址就能点播，官方文档，一个页面播放多个不同格式的视频，网页Hls Flv直
Vue3视频播放器组件Vue3-video-play入门教程
猿小白的博客
03-11 1万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
f播放器：基于Windows视频播放器的电子设备，可以同时播放四个视频。基于electron，可同时播放四个视频的播放器
02-13
f播放器 一个基于Windows视频播放器的电子，可以同时播放四个视频。桌面视频播放器，基于电子，可同时播放四个视频文件。界面尺寸，几乎没有任何菜单，边框，按钮遮挡画面，完全沉浸。 安装环境。安装环境。 npm install create-electron-app -g 克隆或下载此项目。克隆或下载这个工程，安装依赖。 npm install 测试此代码。测试 npm run start 建立安装程序。打包安装包。 npm run make 四格播放器功能： 四格播放器，田字排布，均分宽高 启动即加载上次播放的片子 拖拽片子进到播放器，拖入就显示drag区 空白，暂停，播完时显示Drag区，开播隐藏 顶部全透明的拖拽区。 右上角小/大/关三按钮，悬停可见，半透 四周可拉伸 拖动区增加打开按钮
vue.js中vue-video-player中的怎么插入多个视频，视频可以同时播放的问题及解决办法
CSND7997的博客
03-20 1万+
vue-video-player多个视频解决问题视频可以同时播放的问题 多个视频解决问题 因为是从后台获取不同视频数据，要更改playerOptions里面的url，所以一个playerOptions对象没法解决，解决方法： 1. 把playerOptions对象变成空数组 2. 从后台获取到的数据放在videolist数组里，如下 3. 循环遍历videolist数组，并定义一个arrs来保存...
vue m3u8视频播放 单个视频和多个视频处理
沃德天，倪维胜么，捺莫帅？
11-09 2953
文章目录使用方式组件 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&
vue中多视频资源展示,减少同时多个请求视频资源问题
cha12138的博客
09-08 667
解决并发请求视频资源问题
一个页面展示多个视频窗口（vue）
weixin_42206447的博客
12-26 6270
<template> <divid="video-play"> <Row> <Colv-for="(item,i)inlistArray":span="item.span"> <divstyle="text-align:center;border:1pxsolid#ece9e...
vue-video-player播放m3u8格式的视频
peppa_pig的博客
02-23 7259
一、vue-video-player的使用： 1.安装 npm i vue-video-player -D 2.引入（组件内引入） import { videoPlayer } from 'vue-video-player' import 'video.js/dist/video-js.css' export default { name: "sstc", components: { videoPlayer }, 3.使用 <video-player cla..
vue播放rtmp视频流
03-06
### Vue 播放 RTMP 视频流 在现代前端开发中，视频播放功能是很多应用中的必备组件之一。特别是在需要实时传输视频的应用场景下，例如远程监控系统、在线教育平台等，RTMP（Real-Time Messaging Protocol）作为一种...
怎么修改横屏视频的大小尺寸？调整画面比例的两种方法
departed_saint的博客
12-09 1万+
由于每个视频平台对上传的视频大小尺寸存在差异，因此，为了不影响视频的观看效果，我们在上传视频前先修改视频的大小尺寸，最好按比例来调整视频画面。 一、按比例裁切视频画面 将需要剪辑的视频导入视频剪辑高手的“批量剪辑视频”功能上 多个视频，一行导入一个 在“新视频选项”中勾选“画面裁切……”这个选项，并点“智能编辑裁切区域” 在所弹出的对话框中，第一步先选择一个待裁切的视频，然后将宽度和高度按比例设置，比如1024576，记得保存设置 回到主界面，进行裁切，等裁切好了，打开文件夹，各个视频均按比例裁切为
vue 实现多个视频播放 vue-video-player
weixin_47156901的博客
11-23 1万+
vue 实现多个视频播放 vue-video-player 实现方式：利用vue的一个组件 vue-video-player 步骤一：安装vue-video-player插件 安装：npm install vue-video-player --save或者cnpm install vue-video-player --save 步骤二：在main.js入口文件中引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/vide
vue 使用video加载视频进行展示，视频循环自动播放
Aa12364567的博客
12-30 3051
vue 使用video加载视频进行展示，视频循环自动播放loop autoplay。
m3u8地址_FFmpeg下载m3u8视频
weixin_39997695的博客
11-30 3668
绪言近日在上网课，便想尝试把网课回放扒下来备用，结果是不好下载的m3u8格式。网上看了很多关于m3u8下载的文章，大多比较麻烦，我今日试验出一种较为方便的方式，运用FFmpeg直接转码m3u8视频为mp4格式视频，简单易用。下载安装ffmpeg、获取m3u8链接或文件的方式不再赘述，见他人博客。下载转格式如果有指向m3u8的链接，则有最为简单的下载方式：ffmpeg -i [视频链接] [保存文件...
Vue3使用flvjs播放多个监控视频
Flipped的博客
12-16 1204
【代码】Vue3使用flvjs播放多个监控视频。
Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流
最新发布
hero8011的博客
12-27 3726
Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流，即便是chrome已经不支持flash，但是用B站这款flv.js还是可以实现在现代浏览器播放HTTP FLV视频流的。
vue前端对接监控视频（分屏）
m0_60930775的博客
11-07 814
信号的接入、管理及AI集成，由杭州美畅物联技术有限公司精心打造，通过提供云、中台、边、旁路、端等一系列产品，为客户提供视频能力底座支撑以及全栈式解决方案。本播放器集成了公司业务的接口，包含了实播，回放，云台控制和回放速度控制，截图和全屏功能。可以传两个对象，第一个传的是播放用到的参数，第二个穿的是接口调用后返回的数据。fileLocation：默认回放文件地址（2.集中录像， 3.设备录像）其中第一个对象传的是设备的参数，根据业务接口传。如果是第三方业务对接，也可以单独配置接口地址。在页面中引用相关文件。
vue3实现海康威视根据海康插件进行监控实时预览和回放功能
我是小刘丶
04-23 1万+
因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用进行编写的，大致内容跟vue2一样，拿过去能直接用。至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。如果需要vue2的开发，接下来进入正题。
Vue2视频播放（Video）
热门推荐
Mr Dear的博客
10-10 3万+
Vue2简易封装的视频播放组件
Vue自定义H5视频播放器开发教程与实现代码
开发者使用了Vue的`v-if`指令控制视频元素的显示，确保在需要时播放器出现，同时设置了各种属性来优化跨平台兼容性，如`webkit-playsinline`、`x5-video-player-type`等。预加载、音量设置以及封面图片也被适当处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值