vue-video-player简单例子之mp4视频链接

1.首先，在终端中使用以下命令安装vue-video-player

npm install --save video.js vue-video-player

2.然后，在Vue.js组件中导入vue-video-player，并将其注册为组件

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions" @ready="onPlayerReady"></video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';

export default {
  name: 'LpVideoPlayerTest',
  components: {
    videoPlayer
  },

  data() {
    return {
      playerOptions: {},
      videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    };
  },

  methods: {
    onPlayerReady(player) {
      console.log('Player is ready: ', player);
      player.src({ type: 'video/mp4', src: this.videoUrl });
    }
  }
};
</script>

3.在上面的代码中，onPlayerReady()方法将在打开视频播放器并准备好后调用。可以在此处执行任何其他操作以配置和访问播放器。

4.接下来，还需要确保vue-video-player正确加载。在main.js文件中，添加以下代码

import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

Vue.use(VideoPlayer)

5.最后，尝试在Vue应用程序中使用刚刚创建的组件。

<template>
  <div>
    <my-video></my-video>
  </div>
</template>

<script>
import MyVideo from './MyVideo.vue'

export default {
  components: {
    MyVideo
  }
}
</script>

6.效果图如下，当然没有调整宽高，有点丑啊

7.宽高调整如下

7.1在playerOptions中添加属性fluid:true，则自适应

7.2在playerOptions中添加属性fluid:false,width:300, height:300，则自定义宽高