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代码)
Oct 29 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
vue3.0生命周期的示例代码
Sep 24 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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
php命令行写shell实例详解
2018/07/19 PHP
nodejs读取memcache示例分享
2014/01/02 NodeJs
js图片预加载示例
2014/04/30 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
python文件比较示例分享
2014/01/10 Python
Python注释详解
2016/06/01 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
通过实例解析Python return运行原理
2020/03/04 Python
keras slice layer 层实现方式
2020/06/11 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
2014庆六一活动方案
2014/03/02 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers