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 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
Openlayers实现测量功能
Sep 25 Javascript
js实现缓动动画
Nov 25 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python编程线性回归代码示例
2017/12/07 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
详解django2中关于时间处理策略
2019/03/06 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
经管应届生求职信范文
2014/05/18 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
新闻通讯稿模板
2015/07/22 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
python中if和elif的区别介绍
2021/11/07 Python