Alipayer

感谢每一位支持开源的朋友. 这是一个基于 Alipayer 开发并封装成 vue 组件的播放器.

vue 中使用 Alipayer,播放 rtmp,m3u8,mp4 视频

假如此轮子对你有帮助,请顺手 star 一下吧.o(￣︶￣)o

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

npm i vue-aliplayer-v2 --save
or
yarn add vue-aliplayer-v2

全局注册 main.js

import aliplayer from "aliplayer";

Vue.use(aliplayer);


#### 局部注册 App.vue

```javascript
//推荐第一种(仅v1.2.3)及以上的版本可用
import VueAliplayerV2 from "vue-aliplayer-v2";
components: {
  VueAliplayerV2;
}

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

2.组件中使用

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

<template>
  <div id="app">
    <template v-if="!isShowMultiple && show">
      <vue-aliplayer-v2
        :source="source"
        ref="VueAliplayerV2"
        :options="options"
      />
    </template>
    <div v-if="isShowMultiple && show" class="show-multiple">
      <template v-for="x in 5">
        <vue-aliplayer-v2
          class="multiple-player"
          :key="x"
          :source="source"
          ref="VueAliplayerV2"
          :options="options"
        />
      </template>
    </div>
    <p class="remove-text" v-if="!show">播放器已销毁!</p>
    <div class="player-btns">
      <template v-if="!isShowMultiple && show">
        <span @click="play()">播放</span>
        <span @click="pause()">暂停</span>
        <span @click="replay()">重播</span>
        <span @click="getCurrentTime()">播放时刻</span>
        <span @click="getStatus()">获取播放器状态</span>
      </template>
      <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
      <span @click="options.isLive = !options.isLive"
        >{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span
      >
      <span @click="showMultiple()"
        >{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span
      >
    </div>
    <div class="source-box">
      <span class="source-label">选择播放源(支持动态切换):</span>
      <select v-model="source" name="source" id="source">
        <option value="//player.alicdn.com/video/aliyunmedia.mp4"
          >播放源1</option
        >
        <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4"
          >播放源2</option
        >
        <option
          value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888"
          >播放源3</option
        >
        <option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
      </select>
    </div>
    <div class="source-box">
      <span class="source-label">输入播放源(支持动态切换):</span>
      <input class="source-input" type="text" v-model="source" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options: {
          // source:'//player.alicdn.com/video/aliyunmedia.mp4',
          isLive: true, //切换为直播流的时候必填
          // format: 'm3u8'  //切换为直播流的时候必填
        },
        source: "//player.alicdn.com/video/aliyunmedia.mp4",
        // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
        show: true,
        isShowMultiple: false,
      };
    },

    methods: {
      play() {
        this.$refs.VueAliplayerV2.play();
      },

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

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

      getCurrentTime() {
        // this.$refs.VueAliplayerV2.getCurrentTime();
        this.source = "http://ivi.bupt.edu.cn/hls/cctv1.m3u8";
      },

      getStatus() {
        const status = this.$refs.VueAliplayerV2.getStatus();
        console.log(`getStatus:`, status);
        alert(`getStatus:${status}`);
      },

      showMultiple() {
        this.isShowMultiple = !this.isShowMultiple;
      },
    },
  };
</script>
<style lang="less">
  * {
    margin: 0;
    padding: 0;
  }
  .remove-text {
    text-align: center;
    padding: 20px;
    font-size: 24px;
  }
  .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: 20px;
    .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.功能与配置

props:{
    options: {  //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
        required: false,
        type: [Object],
        default: () => null
    },

    source: {  //播放源(此属性存在则优先于options.source) 支持动态切换,目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播rtmp流切换。
        required: false,
        type: [Object],
        default: () => null
    },

    cssLink:{   //css版本源
        required: false,
        type: [String],
        default: `https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css`
    },
    scriptSrc:{ //js版本源
        required: false,
        type: [String],
        default: `https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js`
    }
}

3.1 配置项 options 属性

可以参考 属性和接口说明

| 名称 | 类型 | 说明 | | :----------------------- | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | source | String | 视频播放地址 url：单独 url。默认状态，表示使用 vid+playauth。source 播放方式优先级最高。source 支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”’，详情参见多清晰度播放。 | | vid | String | 媒体转码服务的媒体 Id。 | | playauth | String | 播放权证，如何得到参见获取 playauth。 | | height | String | 播放器高度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | width | String | 播放器宽度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | videoWidth | String | 视频宽度，仅 h5 支持。详情参见旋转和镜像。 | | videoHeight | String | 视频高度，仅 h5 支持。详情参见旋转和镜像。 | | preload | Boolean | 播放器自动加载，目前仅 h5 可用。 | | cover | String | 播放器默认封面图片，请填写正确的图片 url 地址。需要 autoplay 为’false’时，才生效。Flash 播放器封面也需要开启允许跨域访问。 | | isLive | Boolean | 播放内容是否为直播，直播时会禁止用户拖动进度条。 | | autoplay | Boolean | 播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。 | | rePlay | Boolean | 播放器自动循环播放。 | | useH5Prism | Boolean | 指定使用 H5 播放器。 | | useFlashPrism | Boolean | 指定使用 Flash 播放器。 | | playsinline | Boolean | H5 是否内置播放，有的 Android 浏览器不起作用。 | | showBuffer | Boolean | 显示播放时缓冲图标，默认 true。 | | skinRes | Url | 说明：皮肤图片，不建议随意修改该字段，如要修改，请参照皮肤定制。 | | skinLayout | Array Boolean | 说明：功能组件布局配置，不传该字段使用默认布局。传 false 隐藏所有功能组件，请参照皮肤定制。 | | controlBarVisibility | String | 控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。 | | showBarTime | String | 控制栏自动隐藏时间（ms）。 | | extraInfo | String | 说明：JSON 串用于定制性接口参数。 | | > | > | 1.“fullTitle”：“测试页面”全屏时显示视频标题（仅 flash 支持）。 | | > | > | 2. “m3u8BufferLength”：“30”播放 m3u8 时加载缓存 ts 文件长度单位（秒）（仅 flash 支持）。 | | > | > | 3. “liveStartTime”：“2016/08/17 12:00:00”,直播开始时间，用于提示直播未开始(仅 flash 支持)。 | | > | > | 4. “liveOverTime”：“2016/08/17 14:00:00”,直播结束时间，用于提示直播结束（仅 flash 支持）。 | | enableSystemMenu | Boolean | 是否允许系统右键菜单显示，默认为 false。 | | format | String | 指定播放地址格式，只有使用 vid 的播放方式时支持,可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为空，仅 H5 支持。 | | mediaType | String | 指定返回音频还是视频，只有使用 vid 的播放方式时支持。可选值为’video’和’audio’，默认为’video’,‘audio’主要是针对只包含音频的视频格式，比如音频的 mp4，仅 H5 支持。 | | qualitySort | String | 指定排序方式，只有使用 vid + plauth 播放方式时支持。‘desc’表示按倒序排序（即：从大到小排序）,‘asc’表示按正序排序（即：从小到大排序）,默认值：‘asc’，仅 H5 支持。 | | definition | String | 显示视频清晰度，多个用逗号分隔，比如：’FD,LD’，此值是 vid 对应流清晰度的一个子集，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K），仅 H5 支持。 | | defaultDefinition | String | 默认视频清晰度，此值是 vid 对应流的一个清晰度，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K）,仅 H5 支持。 | | x5_type | String | 声明启用同层 H5 播放器，启用时设置的值为‘h5’,详情参见同层播放。 | | x5_fullscreen | Boolean | 声明视频播放时是否进入到 TBS 的全屏模式，默认为 false。当需要把视频做为背景时，设置为 true,详情参见同层播放。 | | x5_video_position | String | 声明视频播在界面上的位置，默认为“center”。可选值为：“top”，“center”,详情参见同层播放。 | | x5_orientation | String | 声明 TBS 播放器支持的方向，可选值：landscape：横屏,portraint：竖屏,详情参见同层播放。 | | x5LandscapeAsFullScreen | String | 声明 TBS 全屏播放是否横屏，默认值为 true。 | | autoPlayDelay | Number | 延迟播放时间，单位为秒。详情参见延迟播放 | | autoPlayDelayDisplayText | String | 延迟播放提示文本，详情参见延迟播放。 | | language | String | 国际化，默认为‘zh-cn’。如果未设置，则采用浏览器语言。可选值为‘zh-cn’、‘en-us’或其它值。 | | languageTexts | JSON | 自定义国际化文本 json 结构，key 的值需要和 language 属性值对应起来。例子：{jp:{Play:”Play”}},自定义值参见 Json 结构。 | | snapshot | Boolean | flash 启用截图功能。 | | snapshotWatermark | Object | H5 设置截图水印。 | | useHlsPluginForSafari | Boolean | Safari 浏览器可以启用 Hls 插件播放，Safari 11 除外。 | | enableStashBufferForFlv | Boolean | H5 播放 flv 时，设置是否启用播放缓存，只在直播下起作用。 | | stashInitialSizeForFlv | Number | H5 播放 flv 时，初始缓存大小，只在直播下起作用。 | | loadDataTimeout | Number | 缓冲多长时间后，提示用户切换低清晰度，默认：20 秒。 | | waitingTimeout | Number | 最大缓冲超时时间，超过这个时间会有错误提示，默认：60 秒。 | | liveStartTime | String | 直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveOverTime | String | 直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveTimeShiftUrl | String | 直播可用时移查询地址，详情参见直播时移。 | | liveShiftSource | String | flv 直播地址播放时，hls 的流地址，详情参见直播时移。 | | recreatePlayer | Function | flv 直播和 hls 时移切换是，重新创建播放器方法，详情参见直播时移。 | | diagnosisButtonVisible | Boolean | 是否显示检测按钮，默认为 true。 | | disableSeek | Boolean | 禁用进度条的 Seek，默认为 false，仅 Flash 支持。 | | encryptType | int | 加密类型，播放点播私有加密视频时，设置值为 1，默认值为 0。 | | progressMarkers | Array | 进度条打点内容数组，详情参见进度条打点。 | | vodRetry | int | 点播失败重试次数，默认 3 次 | | liveRetry | int | 直播播放失败重试次数，默认 5 次 |

3.2 播放器方法

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

可以参考 播放器接口方法

| 名称 | 参数 | 说明 | | :--------------------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | play | - | 播放视频。 | | pause | - | 暂停视频。 | | replay | - | 重播视频。 | | seek | time | 跳转到某个时刻进行播放，time 的单位为秒。 | | getCurrentTime | - | 获取当前的播放时刻，返回的单位为秒。 | | getDuration | - | 获取视频总时长，返回的单位为秒，这个需要在视频加载完成以后才可以获取到，可以在 play 事件后获取。 | | getVolume | - | 获取当前的音量，返回值为 0-1 的实数。ios 和部分 android 会失效。 | | setVolume | - | 设置音量，vol 为 0-1 的实数，ios 和部分 android 会失效。 | | loadByUrl | url，time | 直接播放视频 url，time 为可选值（单位秒）。目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndPlayAuth | vid：视频 id,playauth：播放凭证 | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndAuthInfo | 仅 MPS 用户时使用,参数顺序为：vid、accId、accSecret、stsToken、authInfo、domainRegion | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | setPlayerSize | w，h | 设置播放器大小 w，h 可分别为 400px 像素或 60%百分比。chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | setSpeed | speed | 手动设置播放的倍速，倍速播放仅 H5 支持。移动端可能会失效，比如 android 微信。倍速播放 UI 默认是开启的。如果自定义过 skinLaout 属性，需要添加 speedButton 项到数组里： | | > | > | {name：“speedButton”，align：“tr”，x：10，y：23} | | setSanpshotProperties | width：宽度,height：高度,rate：截图质量 | 设置截图参数。 | | requestFullScreen | - | 播放器全屏，仅 H5 支持。 | | cancelFullScreen | - | 播放器退出全屏，iOS 调用无效，仅 H5 支持。 | | getIsFullScreen | - | 获取播放器全屏状态，仅 H5 支持。 | | getStatus | - | 获取播放器状态，包含的值：‘init’,‘ready’,‘loading’,‘play’,‘pause’,‘playing’,‘waiting’,‘error’,‘ended’ | | setLiveTimeRange | 开始时间,结束时间 | 设置直播的开始结束时间，开启直播时移功能时使用。例子：player.liveShiftSerivce.setLiveTimeRange(“”，‘2018/01/04 20:00:00’) | | setRotate | rotate 旋转角度 | 参数为旋转角度， 正数为正时针旋转， 负数为逆时针旋转。例如: setRotate(90)。详情参见旋转和镜像。 | | getRotate | - | 获取旋转角度。详情参见旋转和镜像。 | | setImage | image：镜像类型,可选值为：horizon,vertical | 设置镜像，例如: setImage(‘horizon’)。详情参见旋转和镜像。 | | dispose | - | 播放器销毁 | | setCover | cover 封面地址 | 设置封面 | | setProgressMarkers | markers 打点数据集合 | 设置打点数据 | | setPreviewTime | time 试看时间 | 设置试看时间，单位为秒，详情参见试看 | | getPreviewTime | - | 获取试看时间 | | isPreview | - | 是否试看 | | off | ev:事件名[String],handle,事件回调方法[Function] | 通过播放器实例的 off 方法取消绑定的方法 |

4.播放器事件

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

可以参考 播放器事件

| 名称 | 说明 | | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | | ready | 播放器视频初始化按钮渲染完毕。播放器 UI 初始设置需要此事件后触发，避免 UI 被初始化所覆盖。播放器提供的方法需要在此事件发生后才可以调用。 | | play | 视频由暂停恢复为播放时触发。 | | pause | 视频暂停时触发。 | | canplay | 能够开始播放音频/视频时发生，会多次触发，仅 H5 播放器。 | | playing | 播放中，会触发多次。 | | ended | 当前视频播放完毕时触发。 | | liveStreamStop | 直播流中断时触发。m3u8/flv/rtmp 在重试 5 次未成功后触发。提示上层流中断或需要重新加载视频。PS：m3u8 一直自动重试，不需要上层添加重试。 | | onM3u8Retry | m3u8 直播流中断后重试事件，每次断流只触发一次。 | | hideBar | 控制栏自动隐藏事件。 | | showBar | 控制栏自动显示事件。 | | waiting | 数据缓冲事件。 | | timeupdate | 播放位置发生改变时触发，仅 H5 播放器。可通过 getCurrentTime 方法，得到当前播放时间。 | | snapshoted | 截图完成事件。 | | requestFullScreen | 全屏事件，仅 H5 支持。 | | cancelFullScreen | 取消全屏事件，iOS 下不会触发，仅 H5 支持。 | | error | 错误事件。 | | startSeek | 开始拖拽，参数返回拖拽点的时间。 | | completeSeek | 完成拖拽，参数返回拖拽点的时间。 |

5. 图片展示

6.二次开发 下载项目

git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git

Project setup

cd vue-aliplayer-v2

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

7.缺陷 & 后期计划

2019 年 12 月 27 日 更新优化局部引用方式

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

8.感谢

• vue-aliplayer 的作者,项目地址:https://github.com/slacrey/vue-aliplayer

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

Customize configuration

See Configuration Reference.

更新日志

v1.3.0

• sdk 版本更新,默认 SDK 版本由 2.9.3 更新为 2.9.7
• 默认注释更新

v1.2.9 修正部分默认属性, 感谢"Schean17"网友的反馈与建议.

v1.2.8 更换底层默认 sdk 版本为 2.9.3 修复 options 遇到 update loop 错误 感谢"litmonw"网友的反馈与建议.

v1.2.7 更换底层默认 sdk 版本为 2.9.1 的版本. 更新线上演示 demo 的选项

v1.2.6 优化 beforeDestroy() 部分的代码.

v1.2.5 更换默认的播放器 SDK 版本 2.8.2 => 2.9.0,2.8.2 的版本存在多个播放器同时播放直播流异常的 bug,增加了全局 SDK 版本配置,可以在 Vue.use()的时候进行配置.

v1.2.4 修复多个播放器加载,只初始化一个播放器的 bug.文档部分更新,增加了问题栏. 感谢"沙洲 ad"的反馈与建议.

v1.2.3 优化播放器的初始化代码,调整包内结构,优化局部组件的注册方式,也兼容老版本的引用方式.文档部分更新,增加了问题栏. 感谢"liangzhiyuan2015"和"fancheur"两位网友的反馈与建议.

v1.2.2 修复指定 id 情况下,播放器报错"没有为播放器指定容器",目前移除外部指定 id 的方式,所有的播放器 id 都由内部生成,不再由外部指定容器(外部指定的意义并不大),其它的说明:更新 1.2.1 后报错 Uncaught TypeError: 没有为播放器指定容器,因为源码中变更了部分代码,以及最大限度的简化代码,组件内部的根容器就只有一个 div 容器,导致以前外部指定 id 的时候,容器 id 与外部的不一致,导致抛出异常了,现在已经紧急修复了,若在使用,请更新到 v1.2.2 的版本;如果使用了外部指定 id 的方式请移除外部的 id.否则 id 会出现重复的情况., 感谢"liyoro"的反馈和建议.

v1.2.1 修复直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的 bug,修复多个播放器只渲染 1 个的 bug, 感谢"Jonauil"和"guangming95"两位网友的反馈和建议.

v1.2.0 修复播放源(MP4/m3u8)之间切换无法正常播放的 bug,增加 options 配置项动态响应功能,优化部分播放器的逻辑, 感谢"liyoro"网友的反馈和建议.

v1.1.9 修复播放源(修复 prop:source 类型验证报错), 感谢"hugo2017"和“nullF”网友的反馈.

v1.1.8 修复播放源(增加 source 属性类型错误),修复获取播放器状态 getStatus()方法报错, 感谢"kongjigu"网友的反馈.

v1.1.7 增加动态切换播放源(增加 source 属性)功能 感谢"wikimo"和"jieruian"两位网友的反馈建议.

v1.1.6 修复部分已知 bug 和优化局部的引用方式

其它问题

1. IOS 或者其它设备无法全屏播放,或者点击全屏按钮的时候也只是显示竖屏？

方案与问题所在:

一般情况下可能是开启了强制竖屏(也就是屏幕锁定)打开后就会竖屏而不会全屏了！如下关闭就可以了： 参考 issues: https://github.com/langyuxiansheng/vue-aliplayer-v2/issues/25

-开启了屏幕锁定，只要上拉控制中心，点击屏幕锁定关闭就可以了！

-也可能是播放器或者浏览器兼容性问题.