video-play使用，vue2
<template>
<div id="app">
<video-comp class="videoComp-container" ref="videoComp" :videoConf="videoConf">
<!-- 如果将元素浮在视频上方，使用template包裹起来，并取名anyPosition，如下 -->
<template #anyPosition>
<button class="toggle" @click="$()">浮在上方的全屏切换按钮</button>
</template>
</video-comp>
<button @click="$()">播放</button>
<button @click="$()">暂停</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
num: null,
rotateNum: null,
rotate: null
}
},
computed: {
videoConf: function() {
return {
id: "myVideo-1",
source: "/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", //视频地址
cover: "/images/assignment/day_3.jpg", //播放器封面图
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",
}
}
}
}
}
</script>
<style>
.videoComp-container {
width: 400px;
height: 400px;
}
.toggle {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
</style>