xt-player v0.0.2

vue-263-player

1.安装使用! 下载安装 npm 包

npm i vue-263-player --save
or
yarn add vue-263-player

全局注册 main.js

import Vue263player from 'vue-263-player';

Vue.use(Vue263player);

//可选全局配置
//Vue.use(VueAliplayerV2,{
// cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
// scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
//});

局部注册 App.vue

import Vue263player from 'vue-263-player';
components: {
  Vue263player;
}

//或者
components: {
  Vue263player: Vue263player.Player;
}

import 'vue-263-player/lib/vue-263-player.css';

2.组件中使用

组件模板使用,下面的视频连接仅供演示测试.

<template>
  <div id="app">
    <template>
      <Vue263player
        :source="source"
        ref="VueAliplayerV2"
        :options="options"
        @micStatusChange="micStatusChange"
        @audioStatusChange="audioStatusChange"
        @baberrageStatusChange="baberrageStatusChange"
        @error="playerError"
        style="position: relative;height:300px"
      >
        <div class="Vue263playerSlot">用来显示其他内容，在播放器内</div>
      </Vue263player>
    </template>
    <div class="player-btns">
      <template v-if="show">
        <span @click="changePlay('liveAV')">切换播放音视频</span>
        <span @click="changePlay('liveA')">切换播放纯音频</span>
        <span @click="changePlay('playBack')">切换播放回放</span>
        <p></p>
        <span @click="play()">播放</span>
        <span @click="pause()">暂停</span>
        <span @click="replay()">重播</span>
        <span @click="lianmai()">连麦</span>
        <span @click="addBarrage()">添加弹幕</span>
        <span @click="disconnectMic()">下麦</span>
        <span @click="getCurrentTime()">播放时刻</span>
        <span @click="getStatus()">获取播放器状态</span>
        <span @click="mute">静音</span>
        <span @click="unmute">取消静音</span>
      </template>
      <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options: {
          isLive: !false, //切换为直播流的时候必填
          autoplay: true, //根据浏览器和移动端
          playsinline: true,
          preload: true,
          useH5Prism: true,
          mediaType: 'video',
          extraInfo: {
            //移动端添加。
            'x5-video-player-type': 'h5' /*启用H5播放器,是wechat安卓版特性*/,
          },
        },
        roomOptions: {
          themeColor: '#2081eb', // 主题色  默认: '#2081eb'
          bgUrl: '', //播放器背景url
        },
        source: JSON.stringify({
          LD: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
          SD: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
        }),
        audioVideosource: JSON.stringify({
          LD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
          SD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
        }),
        audioSource: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
        playBackSource: JSON.stringify({
          LD: 'http://player.alicdn.com/video/1.mp4',
          SD: 'http://player.alicdn.com/video/1.mp4',
        }),
        // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
        //http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
        // artc://testplayrts.gensee.net/live/test
        // http://119.61.7.138:10002/live/test0_customud.m3u8
        show: true,
        curPlayerStatus: 'liveAV',
      };
    },

    methods: {
      //  liveAV  liveA playBack
      changePlay(status) {
        if (status == 'liveAV') {
          this.source = this.audioVideosource;
          this.options.isLive = true;
          this.options.mediaType = 'video';
        } else if (status == 'liveA') {
          this.source = this.audioSource;
          this.options.isLive = true;
          this.options.mediaType = 'audio';
        } else {
          this.source = this.playBackSource;
          this.options.isLive = false;
          this.options.mediaType = 'video';
        }
      },
      play() {
        this.$refs.VueAliplayerV2.play();
      },

      pause() {
        this.$refs.VueAliplayerV2.pause();
      },
      lianmai() {
        this.$refs.VueAliplayerV2.connectMic(
          { roomId: '4052971391', userName: 'dyy3', run: 'dev' },
          { uid, cid, sid }
        );
      },
      replay() {
        this.$refs.VueAliplayerV2.replay();
      },

      getCurrentTime() {
        this.$refs.VueAliplayerV2.getCurrentTime();
      },

      getStatus() {
        const status = this.$refs.VueAliplayerV2.getStatus();
        console.log(`getStatus:`, status);
      },
      mute() {
        this.$refs.VueAliplayerV2.mute();
      },
      unmute() {
        this.$refs.VueAliplayerV2.unMute();
      },
      // 连麦状态发生改变触发
      //连麦状态： 0->未连麦  1->正在连麦中  2->已连麦  3->被下麦 4->主动下麦成功 5->连麦失败
      micStatusChange(micStatus) {
        console.log(micStatus);
      },
      // 连麦麦克风状态发生改变：例如被主持人静音/解除静音
      // audioStatus  "inactive" or "active" 静音/解除静音
      audioStatusChange(audioStatus) {
        console.log(audioStatus);
      },
      // 主动下麦
      disconnectMic() {
        this.$refs.VueAliplayerV2.disconnectMic();
      },
      /***
       * 直播模式添加弹幕
       */
      addBarrage() {
        let BarrageContent = {
          msg: '11111[1F6001]14667[133][1F6003]111[1F6003]我是为',
          style: {
            fontSize: 15,
            color: 'red',
          },
        };
        this.$refs.VueAliplayerV2.addBarrage(BarrageContent);
      },
      /***
       *
       * 弹幕开关状态发生改变
       */
      baberrageStatusChange(value) {
        console.log(value);
      },
      /***
       * 播放错误
       */
      playerError(err) {
        console.log(err);
      },
    },
  };
</script>
<style lang="less">
  * {
    margin: 0;
    padding: 0;
  }
  .remove-text {
    text-align: center;
    padding: 20px;
    font-size: 24px;
  }
  .Vue263playerSlot {
    position: absolute;
    z-index: 1111111;
    color: red;
  }
  .show-multiple {
    display: flex;
    .multiple-player {
      width: calc(100% / 4);
      margin: 20px;
    }
  }
  .player-btns {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    span {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
      width: 150px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #eee;
      background: #e1e1e1;
      border-radius: 10px;
      text-align: center;
      margin: 5px;
      cursor: pointer;
    }
  }
  .source-box {
    padding: 5px 10px;
    margin-bottom: 10px;
    .source-label {
      margin-right: 20px;
      font-size: 16px;
      display: block;
    }
    #source {
      margin-top: 10px;
    }
    .source-input {
      margin-top: 10px;
      padding: 5px 10px;
      width: 80%;
      border: 1px solid #ccc;
    }
  }
</style>

3.1 配置项 options 属性

可以参考 属性和接口说明

3.2 播放器方法

// 暂停播放
this.$refs.VueAliplayerV2.pause();

可以参考 阿里云播放器接口方法

自定义播放器接口方法 | 名称 | 参数 | 说明 | | connectMic | roomId,userName,dev | 推送、接收 RTC 流,dev 值为 test、pro、dev，默认 test | | disconnectMic | BarrageContent | 取消推送、取消接收 RTC 流 | | addBarrage | roomId,userName | 添加弹幕 | | mute | | 静音 | | unMute | | 解除静音 |

4.播放器事件

<template>
  <vue-aliplayer-v2 @ready="handleReady" />
</template>
<script>
  export default {
    methods: {
      /**
       * 播放器事件回调
       */
      handleReady(e) {
        console.log(`ready`, e);
      },
    },
  };
</script>

可以参考 播放器事件

自定义播放器事件 | 名称 | 说明 | | :- | :- | | micStatusChange | 连麦状态发送改变 连麦状态： 0->未连麦 1->正在连麦中 2->已连麦 3->被下麦 4->主动下麦成功 5->连麦失败 | | audioStatusChange | 麦克风状态发生改变 inactive/acitve，连麦状态触发 | | baberrageStatusChange | 弹幕开关状态发生改变 true/false |

5.缺陷 & 后期计划

2021 年 2 月 22 日 更新优化局部引用方式

您有功能建议,或者 bug 反馈请留言.

6.感谢

• vue-263-player 的作者,项目地址:https://github.com/duanyuanyuan123/vue-263-player

• Alipayer 阿里云的开源播放器 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63

Customize configuration

See Configuration Reference.

更新日志

v1.1.0 修复部分已知 bug v1.1.1 修复部分已知 bug v1.1.2 修复部分已知 bug v1.1.7 修复部分已知 bug,新增加载视频 loading，增加部分 ui 修复 v1.1.8 修复部分已知 bug,ui 修复 v1.1.9 新增连麦环境的配置，默认为测试环境，可以配置为开发环境，打包上线后为生产环境 v1.2.3 修复 android flv 播放，修复 flv 流暂停后无法继续播放问题，修改 ui,新增添加弹幕表情 v1.2.9 修改标清，高清，超高清配置 v1.3.0 修改弹幕 bug，修改连麦类型，修改移动端播放 flv bug v1.4.0 新增 asm,wasm 支持 ios 播放 flv v1.4.3 新增 重载方法，新增 asm,wasm 错误提示 v1.4.4 修改销毁后无法重载问题 v1.4.6 新增音视频切换通知 avStatusChange v1.4.8 修复微信浏览器 flv 不能播放问题 v3.2.1 修复3s无数据重新加载问题 v3.2.2 修复3s无数据重新加载问题 v3.2.3 修复3s无数据重新加载问题 v3.2.4 修复3s无数据重新加载问题,新增loading v3.2.5 修复3s无数据重新加载问题,新增loading,加载未完成检测时禁止取消loading v3.2.7 修复播放无url时loading问题 v3.2.8 修复nodeplayer声音问题 v3.2.9 修复全屏通知问题 v3.3.0 修复全屏通知问题 v3.3.1 新增safari浏览器播放，修改bug v3.6.1 新增rtc版本参数，控制rts参数 v3.6.2 修复rts切换分辨率问题 v3.6.3 修复阿里hls和rts切换后，rts流暂停问题 v3.6.4 修改过期重新拉流错误码为4004的问题 v3.6.7 去掉日志 v3.6.8 新增隐藏显示控制栏开关 v3.6.9 修改rts流isLive等于true不能监听到error错误，修改player没有加载完导致的播放失败 v3.7.0 新增rts报错4121时（403）重新拉流 v3.7.1 修改暖场件ios无法播放问题 v3.7.2 修改loabbyurl无法播放问题 v3.7.3 集成zdplayer v3.7.4 修复zdplayer 无分辨率切换问题 v3.7.7 修复火狐浏览器播放按钮问题，修复切换播放器全屏问题，修复暖场件无法销毁问题 v3.7.8 修改socket.io没有导致连麦不可用问题 v3.7.9 修复切换播放器全屏问题 v3.8.0 修复切换播放器全屏问题 v3.8.1 修复切换播放器全屏问题、占东播放器断网暂停 v3.8.2 修复切换播放器全屏问题loading组件销毁导致，移动端node和263使用同一个画布 v3.8.3 修复263player切换分辨率无法自动播放问题 v3.8.4 增加默认分辨率设置，及原画设置 v3.8.5 修改原画不能设置为默认 v3.8.6 新增弹幕表情，修改9：16显示异常，新增zd播放器错误回调 v3.8.7 新增nodeplayer播放回调。 v3.8.8 修复nodeV9 无法播放问题 v3.9.0 修改弹幕图标 v3.9.1 增加移动端全屏切换 v3.9.2 修改node canvas 绘制方式 v3.9.3 修改node play set setView v3.9.4 set node play release v3.9.6 新增pc音量调节 v3.9.7 修改设置音量bug v4.0.0 修改图标及音量bug v4.0.3 （1）新增setDisabledVolume方法，设置禁止设置音量 （2）修改暖场件无法设置音量bug （3）修改扬声器调节音量后，移出调节音量区域无法隐藏bug
v4.0.5 (1) 修改连麦挂断后，扬声器不可点击bug v4.0.6 (1) 修改切出页面在切回来，扬声器自动打开bug v4.0.7 (1) 修改nodeplayerq静音后，切换分辨率静音状态和按钮不一致问题

v4.0.8 (1) 修复连麦用户无法听到插播声音的问题：修改播放器新增连麦参数，可订阅live和common。云播观众端传参为live，默认为common（云视直播中使用）