在vue中使用video.js实现视频播放_videojs vue

学习笔记

这里是官方关于在vue中如何使用的文档，下面的只是基于官方文档的基础用法，详细内容建议查看官方文档！ 官方文档
以此为例
先看效果：


大致步骤如下：
一、安装video.js

npm install --save video.js
1

二、参考官方文档操作
这里定义一个名为VideoJs的组件，便于使用。
注意要引入下面的video-js.css和video.js！！，一个是样式，一个是播放器。

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
  name: "VideoJs",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

<style scoped>

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

在页面中使用该组件：样式使用了element ui，需要的可以自行安装
主要的是data中的videoOptions，与组件绑定。

<template>
  <div class="background">
    <div>
      <el-row>
        <el-col :span="20" :offset="2" class="welcome-row">
          <span class="welcome">Welcome to my Blog</span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10" :offset="7">
          <div class="video-box">
            <div class="video">
            <!--这里即是引用的组件，外层css可以修饰播放器的样式-->
              <video-js :options="videoOptions" class="video-css"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VideoJs from '@/components/Main/VideoJs';
import 'video.js/dist/video-js.css';
export default {
  name: "PageOne",
  components: {
    VideoJs,
  },
  data(){
    return{
      videoOptions: {
        controls: true,//开启交互，即是用户可控。
        muted: true,//开启视频时是否静音
        fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
        reload: "auto",//重载
        //其余设置根据需求添加！
        poster: require('@/assets/images/海贼王.jpg'),//视频封面
        sources: [//视频播放源，建议本地
          {
            src: require('@/assets/videos/海贼王.mp4'),
            type: "video/mp4"
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {

  },

}
</script>

<style scoped>
  .background{
    background: linear-gradient(to right, #c2e59c, #64b3f4);
    width: 100%;
    height: calc(100vh - 57px);
  }
  .welcome-row{
    width: 100%;
    text-align: center;
    margin-top: 36px;
  }
  .welcome{
    color: white;
    font-size: 64px;
    font-weight: 600;
    font-family: helveticaneuew01-75bold,sans-serif;
  }

  .video-box{
    width: 100%;
    min-width: 456px;
    height: 100%;
    border-radius: 20px;
    background-color: rgba(255,255,255,1);
    box-shadow: 0 2px 4px rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
  .video{
    width: 92%;
  }
  .video-css{
    width: 100%;
    height: 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
98

Talk is cheap, show me the code !—— 薪火工作室！