html5 video player

[uniquejava]

How to use vue in video.js: https://github.com/videojs/video.js/issues/4167

vue-video-player + youtube: https://github.com/surmon-china/vue-video-player/issues/118

集成 youtube

以下这行报Youtube.js?e3d7:36 Uncaught TypeError: Cannot read property 'IS_IOS' of undefined

  var _isOnMobile = videojs.browser.IS_IOS || videojs.browser.IS_NATIVE_ANDROID;

原因: https://github.com/videojs/video.js/issues/5357, 解决, 回退package.json, package-lock.json,清空node-modules, 重新安装 npm i vue-video-player, 它同时会安装如下依赖包:

        "video.js": "6.12.0",
        "videojs-contrib-hls": "5.14.1",
        "videojs-flash": "2.1.1",
        "videojs-hotkeys": "0.2.22"

再装个videojs-youtube插件.

source的涵义

https://docs.videojs.com/docs/api/player.html#Methodssrc

[uniquejava]

setup

// require styles
import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer
  }
}

<template>
  <video-player :options="playerOptions"></video-player>
</template>
<script>
  require('videojs-youtube')
  require('videojs-contrib-hls/dist/videojs-contrib-hls')
  export default {
    data() {
      return {
        playerOptions: {
          sources: [{
            type: "video/youtube",
            src: "https://www.youtube.com/watch?v=iD_MyDbP_ZE"
          }],
          plugins: {
            videoJsResolutionSwitcher: {
              default: 'low',
              dynamicLabel: true
            }
          },
          techOrder: ['youtube'],
          autoplay: false,
          controls: false,
          youtube: {
            ytControls: 2,
            customVars: { 
              wmode: 'transparent' 
            }
          }
        }
      }
    }
  }
</script>

[uniquejava]

set default full screen and vertically center

options加上fluid: true,

<div class="promotion-video">
  <video-player class="video-player-box" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @ready="onPlayerReady">
  </video-player>
</div>

然后外层容器设置100vh, flex布局.

.promotion-video {
  background: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}