该插件vue2版本，基于aliyun播放器二次封装，官方地址为：https://player.alicdn.com/aliplayer/index.html

install

npm install video-play

use

import videoComp from 'video-play'
import 'video-play/plug.css'
Vue.use(videoComp)

config

• 必须给播放器容器设置宽高
• 组件传参，videoConf为对象形式

feature

• 可以通过方法调用，对视频进行一系列操作
• 可以在视频表面添加元素、按钮，且全屏后也不会遮挡
• 试看模式
• 视频截图（自定义水印）

methods

方法挂载在组件的instancePlayer实例上，通过refs获取并调用 |name| manual | |--|--| | play | 开始播放 | | pause | 暂停 | | seek | 跳转到指定秒数(Number) | | dispose | 销毁播放器 | | setRotate | 旋转指定度数(Number) | | getRotate | 返回当前旋转的度数 | | setImage | 镜像模式('horizon': 水平镜像; 'vertical': 垂直镜像) | | setSpeed | 倍速播放(Float) | | mute | 静音 | | setVolume | 设置音量(0.1-1) | | getCurrentTime | 获取当前播放进度（秒） |

Demo

<template>
  <div id="app">
    <!-- 记得给播放器设置宽高，见底部的样式 -->
    <video-comp class="videoComp-container" ref="videoComp" :videoConf="videoConf">
      <!-- 如果将元素浮在视频上方，使用template包裹起来，并取名anyPosition，如下 -->
      <template #anyPosition>
        <button class="toggle" @click="$refs.videoComp.fullClick()">浮在上方的全屏切换按钮</button>
      </template>
    </video-comp>

    <button @click="$refs.videoComp.instancePlayer.play()">播放</button>
    <button @click="$refs.videoComp.instancePlayer.pause()">暂停</button>
    <input type="text" v-model.number="num">
    <button @click="$refs.videoComp.instancePlayer.seek(num)">跳到{{num}}秒的位置</button>
    <button @click="$refs.videoComp.instancePlayer.dispose()">停止（销毁播放器）</button>
    <br />
    <input type="text" v-model.number="rotateNum">
    <button @click="$refs.videoComp.instancePlayer.setRotate(rotateNum)">旋转{{rotateNum}}°(顺时针)</button>
    <button @click="$refs.videoComp.instancePlayer.getRotate()">获取旋转度数</button>
    <span>旋转度数为：{{rotate}}</span>
    <button @click="$refs.videoComp.instancePlayer.setImage('horizon')">水平镜像</button>
    <button @click="$refs.videoComp.instancePlayer.setImage('vertical')">垂直镜像</button>
    <button @click="$refs.videoComp.instancePlayer.setSpeed(2)">两倍播放</button>
    <button @click="$refs.videoComp.instancePlayer.mute()">静音</button>
    <button @click="$refs.videoComp.instancePlayer.setVolume(0.1)">音量为10%</button>

  </div>
</template>

<script>

export default {
  data() {
    return {
      num: null,
      rotateNum: null,
      rotate: null
    }
  },
  computed: {
    videoConf: function() {
      return {
        id: "myVideo-1",  // 如果有多个视频，id需保持唯一性
        source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", //视频地址
        cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
        // vid: '0f825a270513451eb9067324ef754428',
        // playauth: "cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZAyOTE3NDA3ODM2fQ==",
        // progressMarkers: [],
        width: "100%",
        height: "100%",
        // videoWidth: "", // 视频的宽高, 防止旋转和镜像时溢出
        // videoHeight: "", 
        autoplay: false, // 浏览器不允许自动播放，除非配合静音
        encryptType: 1,
        isLive: false,
        rePlay: false,
        preload: true,
        cover: "",
        playsinline: false, // 非全屏模式（即内联的方式
        useH5Prism: true, // 启用H5播放器
        controlBarVisibility: "always",
        // useFlashPrism: false,
        snapshotWatermark: {
          //截图的水印
          left: "100",
          top: "100",
          text: "测试水印",
          font: "italic bold 48px 宋体",
          strokeColor: "red",
          fillColor: "green",
        },
        extraInfo: {
          // 允许匿名跨域访问, 配合截图
          crossOrigin: "anonymous",
        },
        defaultDefinition: [],
        skinLayout: [   // 播放器外观和控件, 去掉该属性，会显示默认外观和控件
          // 截图
          {
            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: "setting",
                align: "tr",
                x: 15,
                y: 12,
              },
              {
                name: "volume",
                align: "tr",
                x: 5,
                y: 10,
              },
              {
                name: "snapshot",
                align: "tr",
                x: 10,
                y: 12,
              },
            ],
          },
        ],
        progressMarkers: [
          {
            // 进度条上打点功能
            offset: 30,
            isCustomized: true,
            coverUrl:   // 打点的预览图
              "https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png",
            title: "test title",
            describe: "test string",
          },
          {
            offset: 50,
            isCustomized: true,
            coverUrl:
              "https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png",
            title: "test title",
            describe: "test string",
          }
        ],
        components: [ // 试看操作，看需求是否需要（理论上可以添加其他内容，只需将时间改成视频总时长）
          {
            "name": 'PreviewVodComponent',
            "type": AliPlayerComponent.PreviewVodComponent,
            "args": [10, '#endPreviewTemplate','<span id="payClass">购买课程</span> 观看完整视频']// 第三个参数是显示可是看后面的文字
          },
          {
            name: "ProgressComponent",
            type: AliPlayerComponent.ProgressComponent,
          }
        ]
      }
    }
  }
}
</script>

<style>

.videoComp-container {
  width: 400px;
  height: 400px;
}
.toggle {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

</style>