video-play使用，vue2

最新推荐文章于 2025-09-29 11:19:09 发布

原创最新推荐文章于 2025-09-29 11:19:09 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #视频

本文详细介绍了如何在Vue2项目中使用video-play插件，包括地址获取、安装步骤、在main.js中的引入及具体使用方法，实现视频播放、暂停、全屏等高级功能。

该视频插件可以通过js控制播放、暂停、跳转播放、镜像等等操作，
还可以在视频的层级之上添加元素，且全屏后仍在。

一、地址点击跳转

二、安装：`npm install video-play`

三、引入

在main.js中

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

四、使用

在使用的地方

<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>

  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      num: null,
      rotateNum: null,
      rotate: null
    }
  },
  computed: {
    videoConf: function() {
      return {
        id: "myVideo-1",
        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", //播放器封面图
        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>