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


Posted in Javascript onOctober 19, 2020

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视频在线播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
js实现网页随机验证码
Oct 19 #Javascript
JS实现4位随机验证码
Oct 19 #Javascript
如何编写一个 Webpack Loader的实现
Oct 18 #Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 #Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 #Javascript
You might like
php缓存技术详细总结
2013/08/07 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python的一些用法分享
2012/10/07 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
常用的10个Python实用小技巧
2020/08/10 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
大码女装:Ulla Popken
2019/08/06 全球购物
百度软件工程师职位
2013/02/14 面试题
白酒市场开发计划书
2014/01/09 职场文书
五型班组建设方案
2014/02/10 职场文书
生物制药专业求职信
2014/03/11 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
社区结对共建协议书
2016/03/23 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL