vue-aliplayer-v2视频播放器的使用

参考过链接（虽然两个都大差不差，还是都打出来吧）：

①GitHub - langyuxiansheng/vue-aliplayer-v2: 这是一个基于Alipayer 开发并封装成vue组件的播放器.可播放rtmp,m3u8,mp4....视频.除支持直播流与点播的基础功能外,也支持视频的加密播放、清晰度切换、直播时移等业务场景等.https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.3.3.4bafbf80OVkZJ9

②vue-alipayer-v2的使用_wx62ce30dccdeaa的技术博客_51CTO博客

-----------------------------------------------------------分割线-----------------------------------------------------------

前言：这几天呢也是项目中用到了aliplayer视频播放器，网上冲浪左找右找始终找不到vue版本的，看来有点不好搞i，既然做好了，那就拿出来分享下【vue + vue-aliplayer-v2】的使用。

一：安装 npm 包

npm install vue-aliplayer-v2 --save

二：全局或局部使用（根据自己意愿任选其一）

全局使用（写在main.js中）：

import VueAliplayer from "vue-aliplayer-v2";

Vue.use(VueAliplayer);

局部使用（写在xxx.vue中）：

<template>
    <!--3.使用组件-->
    <VueAliplayer></VueAliplayer>
</template>

<script>
//1.引入npm 的vue-alipayer-v2下载的组件
import VueAliplayer from 'vue-aliplayer-v2';

export default {
  //2.注册到components组件中
    components:{
      VueAliplayer,
    },
 }
</script>

三：最后的整体视频插件代码（可根据需要填自己想要的属性）

<template>
    <!--4.使用组件-->
    <VueAliplayer :vid="vid" :source="source" cover="https://picsum.photos/800/600"  :options="options"></VueAliplayer>
</template>

<script>
//1.引入npm 的vue-alipayer-v2下载的组件
import VueAliplayer from 'vue-aliplayer-v2';

export default {
  //2.注册到components组件中
    components:{
      VueAliplayer,
    },

  //3.需要返回的data数据
    data(){
      return{
        /**
          *  对aliplayer进行配置
          * **/
          vid:'pc_jPrismPlayer',
          source:"//player.alicdn.com/video/aliyunmedia.mp4",
          //vue-aliplayer-v2提供配置器为options， 所有配置项必须在options，否则无法正常显示
          options:{
               width: '100%',                //播放器宽度
               height: '487px',              //播放器高度
               isLive: false,                //播放内容是否为直播，直播时会禁止用户拖动进度条。
               playsinline:true,             //H5 是否内置播放
               useH5Prism:true,              //指定使用 H5 播放器。
               rePlay:false,                 //播放器自动循环播放.
               preload:true,                 //播放器自动加载，目前仅 h5 可用。
               controlBarVisibility:'hover', //控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。
               autoplay:false,               //播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。
               enableSystemMenu:true,        //是否允许系统右键菜单显示，默认为 false。
               loadDataTimeout:5,            //缓冲多长时间后，提示用户切换低清晰度，默认：20 秒。
               showBarTime:'10000',          //控制栏自动隐藏时间（ms）。
               cover:this.posterUrl,         //播放器默认封面图片，请填写正确的图片 url 地址。需要 autoplay 为’false’时，才生效。Flash 播放器封面也需要开启允许跨域访问。
               disableSeek:true,            //禁用进度条的 Seek，默认为 false，仅 Flash 支持。
               //自定义 不要进度条
               skinLayout:                   //说明：功能组件布局配置，不传该字段使用默认布局。传 false 隐藏所有功能组件，请参照皮肤定制。
               [
                 {
                   "name": "bigPlayButton",
                   "align": "blabs",
                   "x": 30,
                   "y": 80
                 },
                 {
                   "name": "H5Loading",
                   "align": "cc"
                 },
                 {
                   "name": "errorDisplay",
                   "align": "tlabs",
                   "x": 0,
                   "y": 0
                 },
                 {
                   "name": "infoDisplay"
                 },
                 {
                   "name": "tooltip",
                   "align": "blabs",
                   "x": 0,
                   "y": 56
                 },
                 {
                   "name": "thumbnail"
                 },
                 {
                   "name": "controlBar",
                   "align": "blabs",
                   "x": 0,
                   "y": 0,
                   "children": [
                     {
                       "name": "progress",
                       "align": "blabs",
                       "x": 0,
                       "y": 44
                     },
                     {
                       "name": "playButton",
                       "align": "tl",
                       "x": 15,
                       "y": 12
                     },
                     {
                       "name": "timeDisplay",
                       "align": "tl",
                       "x": 10,
                       "y": 7
                     },
                     {
                       "name": "fullScreenButton",
                       "align": "tr",
                       "x": 10,
                       "y": 12
                     },
                     {
                       "name": "subtitle",
                       "align": "tr",
                       "x": 15,
                       "y": 12
                     },
                     {
                       "name": "volume",
                       "align": "tr",
                       "x": 5,
                       "y": 10
                     }
                   ]
                 }
               ],
             }
       }
    }
 }
</script>