vue使用video插件vue-video-player的示例

下面是使用Vue.js框架中的插件vue-video-player的示例攻略：

准备工作

在开始之前，你需要先安装Vue.js和vue-video-player插件。如果你还没有安装这两个工具，请参考以下命令进行安装：

# 安装 Vue.js
npm install vue

# 安装 vue-video-player
npm install vue-video-player --save

使用vue-video-player插件

安装完毕之后，你需要在Vue应用程序中引入vue-video-player插件并使用它。请按以下步骤操作：

导入插件

在应用程序的入口文件（main.js）中导入vue-video-player插件：

import Vue from 'vue'
import VideoPlayer from 'vue-video-player'

Vue.use(VideoPlayer)

创建视频组件

你可以在Vue应用程序中创建一个VideoPlayer组件，并为其传递视频的URL地址：

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        sources: [{
          src: 'http://www.example.com/path/to/video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  }
}
</script>

在此示例中，我们创建了一个VideoPlayer组件，设置了视频URL地址，并使用了选项对象。

配置选项

你可以在Video组件的data中定义一个选项对象，这个对象将应用于视频播放器。

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'http://www.example.com/path/to/video.mp4',
          type: 'video/mp4'
        }],
        poster: 'http://www.example.com/path/to/poster.jpg'
      }
    }
  }
}
</script>

在此示例中，我们设置了视频播放的配置选项，包括自动播放，控件，视频源，海报图等。

现在，我们已经成功地使用了vue-video-player插件来播放视频。接下来，让我们看看一些更多的示例：

示例1：使用HLS视频源

HLS是Apple公司开发的流媒体传输协议，可以对视频进行分段传输，并采用AES 128位加密。在Vue应用程序中，你可以使用vue-video-player插件来播放HLS视频。请按照以下步骤操作：

导入HLS插件

在应用程序的入口文件（main.js）中导入HLS插件：

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'
import 'videojs-flash'
import 'videojs-contrib-hls'

Vue.use(VideoPlayer)

设置HLS视频源

当你使用HLS视频时，你需要把视频源类型设置为application/x-mpegURL，如下所示：

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'http://www.example.com/path/to/video.m3u8',
          type: 'application/x-mpegURL'
        }],
        poster: 'http://www.example.com/path/to/poster.jpg'
      }
    }
  }
}
</script>

示例2：使用直播视频源

如果你需要在Vue应用程序中播放直播视频，你可以使用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'
import 'videojs-flash'
import 'videojs-contrib-hls'
import 'video.js/dist/lang/zh-CN.js'

Vue.use(VideoPlayer)

设置直播视频源

当你使用直播视频时，你需要把视频源类型设置为application/x-mpegURL，如下所示：

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'http://www.example.com/path/to/live.m3u8',
          type: 'application/x-mpegURL'
        }],
        poster: 'http://www.example.com/path/to/poster.jpg'
      }
    }
  }
}
</script>

以上就是vue-video-player插件的使用示例攻略，希望能对你有所帮助。