vue3(nuxt3)+Aliplayer播放器进行直播播流

前言:

        上一篇讲到使用自定义的一个播放器去进行播流进行观看直播,由于之前走的是自己服务器,服务器不是特别好,所以决定使用阿里的推流以及阿里的播放器去进行拉流也更加的适配吧,至少后面出现问题可以有文档看比较完善

实践

        1.这里的话先把官方文档的地址贴出来

                (1) 实现demo:阿里云Aliplayer播放器 (alicdn.com),这个可以自己去配置很多东西可以进行点播和直播

                (2)开发参考_视频点播(VOD)-阿里云帮助中心 (aliyun.com),进行直播拉流

                (3)Web播放器接口说明_视频点播(VOD)-阿里云帮助中心 (aliyun.com),这个有对象属性的解释
Web播放器接口说明_视频点播(VOD)-阿里云帮助中心 (aliyun.com)

        2.我是用的是nuxt服务端渲染的框架,文档上面第一步是引入文件,我这边是没有index.html的所以我是去nuxt.config.ts里面引入的

然后不是服务端渲染的话,去找到根目录下面的index.html放到头部去,vue文件是不可以引入多个的哦

        3.咱们就可以直接上页面去使用了

<div style="width: 100%; height: 100%;" class="prism-player" id="player-con" ref="playerContainer"></div>

然后再js里面的话有个注意点:把他放在渲染后,不然会报错找不到对象的(服务端渲染的放)

const playerContainer = ref(null);
 
onMounted(() => {
    
    var player = new Aliplayer({
        "id": playerContainer.value,
        "source": "拉流地址",
        "autoplay": true,
        "isLive": true,
        "preload": true,
        "autoPlayDelayDisplayText": "正在加载",
        "loadDataTimeout": "正在加载",
    },function(player){
      console.log('The player is created.')
    });
});

        这样基本就完事了,有问题可以去看文档或者私信我,后端推流地址上一篇文章有讲

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值