采用阿里云的直播方案,协议采用RTMP和M3U8两种格式,RTMP延迟大约在10-15秒左右,M3U8大约在20-25秒左右,
RTMP需要使用flash播放器,M3U8可以使用原生video标签
需要注意的坑:
    1.开启浏览器的flash *非常重要
    2.需要引入
        require('videojs-flash/dist/videojs-flash')
        require('videojs-contrib-hls/dist/videojs-contrib-hls')
        这2个js
    3.配置自己的flash播放器
        在flash中加入swf: '/static/xxx.swf'
    4.组件beforeDestroy的时候调用dispose方法销毁videojs
        this.$refs.videojs.dispose()

vue使用vue-video-player在直播中的应用的更多相关文章

  1. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  2. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  3. vue学习之路 - 3.基本操作(中)

    基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if .  ...

  4. vue --- 解读vue的中webpack.base.config.js

    const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils ...

  5. 执行 vue inspect > output.js 报错,无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统中禁止执行脚本

    无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统中禁止执行脚本.有关详细信息,请参阅 "get-help ab ...

  6. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  7. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

  8. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  9. Vue (一) --- vue.js的快速入门使用

    =-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...

  10. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

随机推荐

  1. [linux]关于deepin截图软件在KDE桌面下无法使用粘贴的解决方法

    -------更新----- 1.其实不如直接关闭klipper启动程序 # rm -rf /usr/share/plasma/plasmoids/org.kde.plasma.clipboard 2 ...

  2. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  3. JAVA 把小数分成整数和小数

    在进行进制转换的时候,我们需要把小数分为整数和小数两部分. 这里介绍两种方法. 第一种举个例子:1.23分为1 和 0.23 第二种:1.23 分为 1 和23 有时需要具体情况具体分析自己需要哪种类 ...

  4. 在 ubuntu18.04 中搭建 Django 开发环境

    在Ubuntu 18.04 安装 python3.pip3.pycharm,搭建 Django 开发环境. 1.安装 python3 pip3 sudo apt-get install python3 ...

  5. React-Error

    1. react创建一个单页应用,官网给的命令是ngx create-react-app my-project 2. window上表示,安装失败 3.解放办法:npm install -g crea ...

  6. Go 基础 坑

    1.字符串空为"" 2. 传递的数组是原数组的拷贝,所以是无法通过传递数组的方法去修改原地址的数据的.在GO语言中除了切片(slice).集合(map).通道(channel)和接 ...

  7. 链接中 href='#' 和 href='###' 的区别

    <a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 <a& ...

  8. python logging模块使用流程

    #!/usr/local/bin/python # -*- coding:utf-8 -*- import logging logging.debug('debug message') logging ...

  9. Mysql 存储过程查询结果赋值到变量的方法

    drop table if exists test_tbl; create table test_tbl (name varchar(20), status int(2)); insert into ...

  10. python的切片

    切片 取一个list或tuple的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Ja ...