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

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

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

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

?

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

<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文件中，添加以下代码

?

1 2 3 4 5 6

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应用程序中使用刚刚创建的组件。

?

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

<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，则自定义宽高