Vue3之使用vue-video-player_vue3-video-play

1.使用npm下载vue-video-player

npm i vue-video-player -S

1
2

2.在入口文件main.js引入

import { createApp } from 'vue'
import App from './App.vue'

// 视频插件
import VideoPlayer from 'vue-video-player/src'
import 'video.js/dist/video-js.css' 
import 'vue-video-player/src/custom-theme.css'

const app = createApp(App);
app.use(VideoPlayer)
app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

3.创建video.vue文件，这个文件主要配置vue-video-player

<template>
  <!--在视频外面加一个容器-->
  <div class="input_video">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
    ></video-player>
  </div>
///这是注掉的内容
<!--  
<div class="content">
    &lt;!&ndash; poster: 封面url &ndash;&gt;
    &lt;!&ndash; src: 视频url &ndash;&gt;
    <video-player
       src="/videos/demo.mp4"
        class="video-player vjs-big-play-centered"
    controls
    :loop="true"
    :volume="0.6"
    ></video-player>
  </div>
  -->
</template>

<script setup>
import {reactive} from "vue";
//视频播放
const playerOptions=reactive(
    {
      playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
      autoplay: false, //如果true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: true, // 视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [{
        type: "video/mp4",
        // src: './static/videos/demo.mp4'//url地址
        // src: '.../.../.../.../.../.../.../.../.../public/videos/demo.mp4'//url地址
        src: 'videos/demo.mp4'//url地址
      }],
      poster: "", //你的封面地址
      // width: document.documentElement.clientWidth,
      notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,//当前时间和持续时间的分隔符
        durationDisplay: true,//显示持续时间
        remainingTimeDisplay: false,//是否显示剩余时间功能
        fullscreenToggle: true  //全屏按钮
      }
    }
)


/*import { ref } from 'vue';

const visibly = ref(false)
const handleClose = () => {
  visibly.value = false
}
// const src=require("/videos/demo.mp4")
const videoUrl = ref()
const openDialog = (val) => {
  videoUrl.value = val
  visibly.value = true
}
defineExpose({openDialog})*/
</script>

<style lang="scss">
.input_video {
  width: 400px;
  height: 400px;
  margin: 0 auto;

  .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    height: 250px;
  }
}

/*.content {
  width: 100%;
  height: 350px;
  margin: 0 auto;

  .video-js {
    //设置视频高宽
    height: 255px;
    //height: 100%;
    width: 100%;
  }
}*/
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

4、需要使用视频播放的地方就引入该文件

<template>
  <div class="fix">
    <div class="content_bg ">
      <video-player style="width: 100%;height: 400px;"></video-player>
    </div>
  </div>
</template>

<script setup>
import VideoPlayer from './video-Play/video-player.vue'

</script>

<style lang="scss" scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

一、以上代码原来报错

*vue-video-player 报错The media could not be loaded, either because the server or network failed or because the format is not supported*

原因：
我的src的路径即视频文件存放到本地了，路径直接写src: 'videos/demo.mp4'而不用"/videos/demo.mp4"

若路径写不正确运行npm run build命令打包项目时错误一堆，惨痛教训

二、刚开始运行安装命令时，在入口文件引入报错，会显示找不到文件，在node_moudles里也找不到，后来又运行了，然后运行打包命令后发现引入不会报错了，后修改src路径后正常显示了

npm i vue-video-player -S


后来运行
npm install video.js @videojs-player/vue --save


1
2
3
4
5
6
7

参考文章：
https://blog.csdn.net/qq_42570449/article/details/121708044