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.')
    });
});

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