vue 는 video 플러그 인 vue-video-player 의 예제 를 사용 합 니 다.

플러그 인 설치

npm install vue-video-player --save

2.플러그 인 설정
main.js 에서 전역 설정 플러그 인

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

Vue.use(VideoPlayer)

플러그 인 사용
vue 구성 요소 의 프로그램 은 다음 과 같 습 니 다.

<template>
  <!--          -->
  <div class="input_video">
  <video-player class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
  ></video-player>
  </div>
</template>
<script>
  export default {
    name : 'BusImg',
    data () {
      return {
        //     
        playerOptions : {
          playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //        
          autoplay : false, //  true,           。
          muted : false, //              。
          loop : false, //           。
          preload : 'auto', //       <video>                 。auto         ,        （       ）
          language : 'zh-CN',
          aspectRatio : '16:9', //           ，                 。          -           （  "16:9" "4:3"）
          fluid : true, //  true ，Video.js player       。    ，             。
          sources : [ {
            type : "",
            src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url  
          } ],
          poster : "", //      
          // width: document.documentElement.clientWidth,
          notSupportedMessage : '        ，     ', //    Video.js               。
          controlBar : {
            timeDivider : true,//             
            durationDisplay : true,//      
            remainingTimeDisplay : false,//          
            fullscreenToggle : true //    
          }
        }
      }
    }
  }
</script>
<style>
  .input_video{
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
</style>

결과
결 과 는 그림 과 같다.

vue-video-player 의 npm 커 뮤 니 티 주소:https://www.npmjs.com/package/vue-video-player
이상 은 vue 가 video 플러그 인 vue-video-player 를 사용 하 는 예제 의 상세 한 내용 입 니 다.vue 가 video 플러그 인 을 사용 하 는 것 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!