uni-app（Vue）直播拉流

╰+哭是因爲堅強的太久メ 2022-11-29 12:23 215阅读 0赞

### html ###

<div class="prism-player" id="J_prismPlayer"></div>

### javascript ###

created() { 
       // 创建引入阿里云播放文件
    	function loadScriptString(src) { 
    		var script = document.createElement('script') //创建一个script标签
    		script.type = 'text/javascript'
    		script.src = src
    		document.getElementsByTagName('head')[0].appendChild(script)
    	}
    	function loadLinkString(src) { 
    		var link = document.createElement('link') //创建一个link标签
    		link.rel = 'stylesheet'
    		link.href = src
    		document.getElementsByTagName('head')[0].appendChild(link)
    	}
    	// 使用阿里云播放器
    	loadLinkString('https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css')
    	loadScriptString('https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js')
    	this.getLive()
    },
    methods: { 
      getLive(){ 
        // 此处可请求后端的拉流url
        var player = new Aliplayer(
    		{ 
    			id: 'J_prismPlayer',
    			width: '100%',
    			height: '200px',
    			autoplay: true,
    			//支持播放地址播放,此播放优先级最高
    			source: 'https://xxxx.com/xxx/xx.flv?auth_key=15978868453423f', // 推流地址
    			isLive: true
    		},
    		function(player) { 
    			console.log('播放器创建好了。')
    		}
    	)
      }
    }

注意：uni-app中用组件的方式引入.vue文件是没有onLoad/onShow等生命周期的。  
[播放器可参考阿里云文档][Link 1]

[Link 1]: https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1090.5048bf809mCPgx

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关直播推流与拉流简概

推流：将直播内容推送至服务器的过程拉流：为服务器已有直播内容，用指定地址进行拉取的过程 ![在这里插入图片描述][14676bc156ca43ed832d1672e6bb

亦凉/ 2024年02月18日 10:41/ 0 赞/ 64 阅读

相关 windows ffmpeg + nginx + videojs 实现rtmp推流拉流及hls推流拉流直播

上一篇博客已经写了关于windows下面使用ffmpeg+nginx搭建rtmp推流拉流直播环境,可通过ffplay,vlc等pc端客户端软件播放,但因为涉及到浏览器播放原因,

r囧r小猫/ 2023年01月21日 02:29/ 0 赞/ 31 阅读

相关 uni-app（Vue）直播拉流

html <div class="prism-player" id="J_prismPlayer"></div> javascript creat

╰+哭是因爲堅強的太久メ/ 2022年11月29日 12:23/ 0 赞/ 216 阅读

相关直播平台入门到精通-推流拉流

推流：将直播内容推送至服务器的过程拉流：为服务器已有直播内容，用指定地址进行拉取的过程 ![82d8653e210f52c9e9118211cd905f18.png][]

淩亂°似流年/ 2022年11月14日 00:54/ 0 赞/ 205 阅读

相关腾讯云直播、生成腾讯推拉流

一、背景最近公司用到推拉流，经过一番比较后决定使用腾讯云。但是腾讯云的文档确实有点一言难尽，去网上搜索一下例子，结果就是把腾讯云的demo粘贴过去，还必须得是会员才能看

淡淡的烟草味﹌/ 2022年11月12日 02:31/ 0 赞/ 390 阅读

相关 java 推拉流_一个小时开发的直播推拉流软件来了

usingMnNiuVideoApp;usingMnNiuVideoApp.Common;usingSystem;usingSystem.Collections.Generic

比眉伴天荒/ 2022年11月07日 15:56/ 0 赞/ 249 阅读

相关 vue 播放rtmp 直播拉流视频

一、写插件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

红太狼/ 2022年10月24日 11:49/ 0 赞/ 1266 阅读

相关手动搭建直播平台，nginx rtmp模块，推流，拉流.

CDN网络构成边缘节点:用户从边缘节点上获取数据 (离用户最近的) 二级节点：主干网节点，主要用于缓存，减轻源站压力(一般部署在大都市) 源站：CP

Bertha 。/ 2022年02月26日 06:50/ 0 赞/ 443 阅读

相关 iOS - 直播流程，视频推流，视频拉流，简介，SMTP、RTMP、HLS、 PLPlayerKit

收藏笔记 1 . 音视频处理的一般流程：数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示 1、数据采集：摄像机及拾音器收集视频及音频数据，此时

素颜马尾好姑娘i/ 2021年11月01日 03:06/ 0 赞/ 556 阅读

相关 Swift 直播项目（推流、拉流）

直播项目中关键的是推流和拉流，对于推流推流拉流大厂当然可以自己开发，但是像我一样在公司独立开发的，是没有那个时间和精力去独立开发一套推流拉流的（不是没时间和精力，是因为没那个能

桃扇骨/ 2021年09月18日 08:42/ 0 赞/ 604 阅读