![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
视频直播
文章平均质量分 63
左边的天堂
这个作者很懒,什么都没留下…
展开
-
Vue视频直播,解决Web端+小程序端同时播放问题
一、Web端实现Web端是vue2,用的是LiveQing,支持多种格式视频播放,可以去官网(https://www.liveqing.com/docs/download/LiveQing.html)看。首先安装插件npm install --save @liveqing/liveplayer然后在vue.config.js里面加上如下内容:const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { c原创 2021-10-14 14:51:48 · 1302 阅读 · 0 评论 -
【视频直播篇一】入门篇
一、前言公司产品要集成视频直播,原来找的一家第三方厂家已经对接好了,后来领导说成本太高要换。拿到同行的产品来看,发现他们用的是rtmp协议的直播流。领导说要上这个,把这个任务交给我,当时都蒙圈了。这啥玩意?!从来没见过啊。领导的话就是命令,没办法,硬着头皮也要上。花了大概3-4天,终于弄清楚了这个“rtmp”是什么东西。首先直播中有两个非常重要的概念:推流、拉流。通俗来讲,推流指的就是我们在直播平台看到的主播那一端采集摄像头数据推送到视频流服务器。而拉流就是观众这一段使用pc、移动端播放直播视频了。二原创 2021-03-04 18:36:23 · 2436 阅读 · 1 评论 -
【视频直播篇二】vue-cli3集成LivePlayer
关于LivePlayer的介绍请参考https://www.liveqing.com/docs/products/LiveQing.html首先导入插件npm install @liveqing/liveplayer --save-dev然后把下面三个文件放入public目录crossdomain.xmlliveplayer.swfliveplayer-lib.min.js还需要安装copy-webpack-plugin插件npm install --save-dev copy-web原创 2021-03-08 13:57:15 · 1993 阅读 · 5 评论 -
【视频直播篇三】vue-cli3集成vue-video-player
安装vue-video-player插件npm install vue-video-player --save安装rtmp支持npm install videojs-flash --save安装hls(m3u8)支持npm install videojs-contrib-hls --save安装好之后,编写页面<template> <div> <video-player ref="videoPlayer" class="vjs-custom-s原创 2021-03-08 14:12:26 · 1454 阅读 · 0 评论 -
【视频直播篇四】vue-cli3集成flv.js
在public目录下的index.html文件加入flv.js<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>创建vue页面<template> <div class="content"> <video id="my-video" style="width:100%;height:100%;position:relative;"原创 2021-03-08 14:29:13 · 1319 阅读 · 1 评论 -
【视频直播篇五】vue-cli3集成vue-aliplayer-v2
安装插件npm install vue-aliplayer-v2 --save编写页面<template> <div id="app"> <template v-if="!isShowMultiple && show"> <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />原创 2021-03-08 14:39:58 · 2265 阅读 · 1 评论 -
【视频直播篇六】videojs的使用
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>video.js播放rtmp流</title> <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/7.10.2/vi原创 2021-03-08 14:47:53 · 1242 阅读 · 0 评论 -
【视频直播篇七】Aliplayer的使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge" > <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale原创 2021-03-08 15:00:09 · 1806 阅读 · 0 评论