该插件vue2版本，基于aliyun播放器二次封装，官方地址为：https://player.alicdn.com/aliplayer/index.html
install
npm install video-playuse
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>