vue+node 实现视频在线播放的实例代码

1.node服务端

数据流传输,可在线缓存

//获取参数
  var params=urldeal.parse(req.url,true).query
  const ROOT_PATH = process.cwd();//必须使用绝对路径,使用相对路径会直接下载文件
  let path =ROOT_PATH+params.url;

  let stat = fs.statSync(path); //获取文件信息
  let fileSize = stat.size;
  let range = req.headers.range;

  if (range) {
    //有range头才使用206状态码

    let parts = range.replace(/bytes=/, "").split("-");
    let start = parseInt(parts[0], 10);
    let end = parts[1] ? parseInt(parts[1], 10) : start + 9999999;

    // end 在最后取值为 fileSize - 1
    end = end > fileSize - 1 ? fileSize - 1 : end;

    let chunksize = (end - start) + 1;
    let file = fs.createReadStream(path, { start, end });
    let head = {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(206, head);
    file.pipe(res);     //Node中的Server端HTTP response是Writable流
  } else {
    let head = {
      'Content-Length': fileSize,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(200, head);
    fs.createReadStream(path).pipe(res);
  }

2.vue客户端

1.安装video-player插件

cnpm install vue-video-player --save

2.组件中引用

 <video-player class="video-player vjs-custom-skin"
         ref="videoPlayer"
         :playsinline="true"
         :options="playerOptions"
 ></video-player>

3.调用的data中的数据

 data() {
  return {
   // 视频播放
   playerOptions: {
    playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,浏览器准备好时开始回放。
    muted: false, // 默认情况下将会消除任何音频。
    loop: false, // 导致视频一结束就重新开始。
    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
    language: 'zh-CN',
    aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
    fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
    sources: [{
     type: "",
     //src: require('@/assets/'+this.vurl)//url地址
      src: 'http://localhost:10086/videos?url=/public/videos/'+this.vurl, //url地址,请求中需要包含具体的视频文件名
    }],
    poster: '', //你的封面地址
    // width: document.documentElement.clientWidth,
    notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
     timeDivider: true,
     durationDisplay: true,
     remainingTimeDisplay: false,
     fullscreenToggle: true //全屏按钮
    }
   }
  }
 },

附录:vue+flvjs播放直播流FLV,分页时如何断开之前直播流解决办法

使用flvjs库同时播放flv文件,需要分页发现,之前直播流没有断开,很影响性能,网上查阅借鉴下边代码实现断开上页直播流

// 销毁播放器实例
  closePlayer() {
   if (this.player.length > 0) {
    this.player.forEach((item) => {
     item.destroy(true);
     item.off('ended', function () {});
     item.off('error', function () {});
     item = null;
    });
    this.player = [];
   }
  },
// 初始化播放器
  initPlayer(id, url, img) {
   let doms = document.getElementById(id);
   doms.innerHTML = '';
   this.player.push(
    new FlvPlayer({
     id: id,
     url: url,
     poster: img,
     isLive: true,
     autoplay: true,
     volume: id == 'videos0' ? 0.5 : 0,
     preloadTime: 10,
     minCachedTime: 5,
     cors: true,
    })
   );
   this.player[this.player.length - 1].on('ended', () => {
    //事件名称可以在上述查询
    this.getLivingList();
   });
   this.player[this.player.length - 1].on('error', () => {
    //事件名称可以在上述查询
    this.getLivingList();
   });
  },
// 翻页操作
  currentChange(e) {
   this.closePlayer();
   this.pageno = e;
   this.getLivingList();
  },
  // 获取直播中的列表
  async getLivingList() {
   let res = await this.$req(api.liveShowers, {
    ...this.searchForm,
    pageno: this.pageno - 1,
    pagesize: this.pagesize,
   });
   console.log(res);
   if (res.code == 200) {
    // 获取到数据,赋值然后循环实例化
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    this.livingList = res.data.showers;
    this.totalP = res.data.total_page - 0;
    this.totalS = res.data.total_showers;
    this.isrefresh = false;
    if (this.livingList.length > 0) {
     setTimeout(() => {
      this.livingList.forEach((item, idx) => {
       let domid = 'videos' + idx;
       this.initPlayer(
        domid,
        item.play_url,
        this.$store.state.coverTop + item.showcover
       );
      });
     }, 400);
    } else {
     // 如果返回没有直播数据又不是第一页。就跳到第一页再请求一下
     if (this.pageno > 1) {
      this.pageno = 1;
      this.getLivingList();
     }
    }
   }
  },

总结

到此这篇关于vue+node 实现视频在线播放的实例代码的文章就介绍到这了,更多相关vue视频在线播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

  • vue使用video.js进行视频播放功能

    关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide

  • vue实现的网易云音乐在线播放和下载功能案例

    本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

  • vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video html页面 <video id="vide" class="video-js v2 ani resize" autoplay :src="视频地址" type="

  • vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

  • vue视频播放插件vue-video-player的具体使用方法

    安装 npm install vue-video-player --save 引入 可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2

  • vue+node 实现视频在线播放的实例代码

    1.node服务端 数据流传输,可在线缓存 //获取参数 var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必须使用绝对路径,使用相对路径会直接下载文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //获取文件信息 let fileSize = stat.size; let range = req.header

  • 使用node.js对音视频文件加密的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: fs.readFile('./downsuccess/'+name+'', {flag: 'r+', encoding: ''}, function (err, data) { console.log('读取中') if(err) { return; } let b = new Buffer(data); let c = b.toString('hex'); let cipherBuffer = _this.cipher(data); fs.

  • vue 获取视频时长的实例代码

    直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <button cl

  • Vue+Express实现登录注销功能的实例代码

    对Vue全家桶有基本的认知. 用有node环境 了解express 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口 后端验证接口进行session验证,返回信息 前端根据后端返回信息进行操作 2.前后端进行了怎么的交互? 登录 注销 二丶

  • 微信小程序仿抖音短视频切换效果的实例代码

    一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>>仿抖音短视频切换 代码逻辑 直接调用自定义的swiper组件就好 调用代码 js const videoList = [] Page({ data: { videoList, activeId:2, isPlaying:true }, onLoad() { var that = this wx.getSys

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 使用 Vue.js 仿百度搜索框的实例代码

    整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

  • vue Render中slots的使用的实例代码

    本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu

  • vue.js加载新的内容(实例代码)

    vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

随机推荐