hx-dxb-video-player v1.0.3

hx-dxb-video-player

video player

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

使用方法

npm i hx-dxb-video-player -S

<template>
    <div class="video-player" id="myvideo">
      <VideoPlayer
        :videoUrl="url"
        @file-ended="fileEnded"
        @full-screen="fullScreen"
        @is-auto-play="setPlayStatus"
      />
    </div>
</template>
<script>
import VideoPlayer from "hx-dxb-video-player";
export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
        url: ''
    }
  },
  methods: {
    
    fullScreen(isFullScreen) {
      // isFullScreen 是否最大化 boolean
      const myvideo = document.getElementById("myvideo");

      if (isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      } else {
        if (myvideo.requestFullscreen) {
          myvideo.requestFullscreen();
        } else if (myvideo.mozRequestFullScreen) {
          myvideo.mozRequestFullScreen();
        } else if (myvideo.webkitRequestFullscreen) {
          myvideo.webkitRequestFullscreen();
        } else if (myvideo.msRequestFullscreen) {
          myvideo.msRequestFullscreen();
        }
      }
    },
    fileEnded() {},
    
    setPlayStatus(status) {
        // status 是否自动播放 boolean
    },
  }

}

</script>

参数描述

| 参数 | 类型 | 描述 |

| videoUrl | String | 视频 url |

| @file-ended | Function | 视频播放结束回调 |

| @full-screen | Function | 视频最大化回调 |

| @is-auto-play | Function | 自动播放视频回调 |