vuealipayerv2的使用

1. 安装

npm i vue-aliplayer-v2 --save

2. 全局注册 main.js

import VueAliplayerV2 from "vue-aliplayer-v2";

Vue.use(VueAliplayerV2);

//可选全局配置
//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

//推荐第一种(仅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 {
       calc(100% / 4);
      margin: 20px;
    }
  }
  .player-btns {
     100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    span {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
       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;
       80%;
      border: 1px solid #ccc;
    }
  }
</style>

 

3.功能与配置

props:{

    forbidFastForward: {    //禁止拖拽快进
            required: false,
            type: [Boolean],
            default: false
    },
    
    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 属性

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	完成拖拽，参数返回拖拽点的时间。