【vue-video-player视频播放器】

Vue-Video-Player

video.js player component for Vue.
适用于 Vue 的 video.js 播放器组件。

https://github.com/surmon-china/vue-video-player

NPM

安装

npm install vue-video-player --save

Mount

在main.js中添加（mount with global）

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

// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)

新建一个vueVideoPlayer.vue组件供调用（mount with component）

<template>
 <div id="vueVideoPlayer">
	 <video-player 
		 class="video-player vjs-custom-skin" 
		 ref="videoPlayer" 
		 :playsinline="true" 
		 :options="playerOptions"
	 ></video-player>
 </div>
</template>

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

在其他组件调用

<vueVideoPlayer :src="data.url" :cover_url="data.cover_url" />
 
import vueVideoPlayer from './module/vueVideoPlayer'
// 不要忘记注册
components： {
 vueVideoPlayer 
}

下面附上常见的mimetype配置列表

Video Type	Extension	MIME Type
Flash	.flv	video/x-flv
MPEG-4	.mp4	video/mp4
iPhone Index	.m3u8	application/x-mpegURL
iPhone Segment	.ts	video/MP2T
3GP Mobile	.3gp	video/3gpp
QuickTime	.mov	video/quicktime
A/V Interleave	.avi	video/x-msvideo
Windows Media	.wmv	video/x-ms-wmv

MIME类型，详细查看MIME 类型 - HTTP | MDN

终是悟空成了佛
你一堕落便是魔