vue3 + video-player 播放视频

码住不放松

已于 2022-12-16 14:42:52 修改

阅读量1.1k

点赞数 1

文章标签：音视频 vue.js javascript

于 2022-12-02 15:36:02 首次发布

本文链接：https://blog.csdn.net/weixin_53898445/article/details/128149074

版权

//安装
npm install video.js @videojs-player/vue --save

//全局引入

//main.ts
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

const app = createApp(App);
app.use(VueVideoPlayer)

实现代码

<script setup lang="ts">
import { ref } from 'vue';

const visibly = ref(false)
const handleClose = () => {
  visibly.value = false
}  

const videoUrl = ref()
const openDialog = (val:string) => {
  videoUrl.value = val
    visibly.value = true
}
defineExpose({openDialog})
</script>

<template>
  <el-dialog
    v-model="visibly"
    title="宣传视频播放"
    width="800px"
    @close="handleClose"  
  >
  <div class="content">
<!-- poster: 封面url -->
<!-- src: 视频url -->
    <video-player
      poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
      src="https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4"
      class="video-player vjs-big-play-centered"  //播放按钮居中展示
      controls
      :loop="true"
      :volume="0.6"
    ></video-player>
  </div>
  </el-dialog>
</template>

<style lang="scss">
.content {
  width: 100%;
  height: 550px;
  .video-js {
//设置视频高宽
    width: 100%;
    height: 530px;
  }
}
</style>

效果图