uni-app(Vue)直播拉流
@[TOC] uni-app(Vue)直播拉流<div class="prism-player" id="J_prismPlayer"></div>```javascriptcreated() {function loadScriptString(src) {var script = document.createElement('script') //创建一个script
·
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等生命周期的。
播放器可参考阿里云文档
更多推荐
已为社区贡献11条内容
所有评论(0)