2017-10-17 6 views
0

vue-video-player을 통합하기 시작했습니다. 플레이어는 너비 만 100 픽셀로 렌더링됩니다. 왜 또는 어떻게 변경해야하는지 모르겠습니다.Vue.js vue-video-player는 100px 너비로 렌더링합니다.

설명서에서 아무 것도 찾을 수 없었습니다. 사실, css 파일을 포함시키는 것은 다소 혼란 스러웠습니다. 내 수입 (위의 require 대 문서)이 맞는지 확실하지 않습니다.

어떻게 플레이어의 너비를 설정할 수 있습니까? playerOptions에서

<template> 
    <div> 
     <video-player 
       ref="videoPlayer" 
       :options="playerOptions" 
       :playsinline="true" 
     > 
     </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: 'foo', 

     components: { 
      videoPlayer, 
     }, 

     data() { 
      return { 
       playerOptions: { 
        muted: true, 
        language: 'en', 

        playbackRates: [1.0], 

        sources: [{ 
         type: "video/mp4", 
         src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" 
        }], 

        poster: "/static/images/defaults/image.png", 
       } 
      } 
     }, 
    } 
</script> 

enter image description here

+0

당신은'폭 div''당신의 포장을 주려고 노력 유무 : 없음 100 % 난 그냥 시도' –

+0

을하지만, 변화. Thx – pymarco

답변

1

은 폭과 높이를 설정

playerOptions: { 
    // videojs options 
    muted: true, 
    language: 'en', 
    techOrder: ['html5', 'flvjs'], 
    playbackRates: [0.7, 1.0, 1.5, 2.0], 
    width: '800px', 
    height: '800px', 
    plugins: { 

    }, 
    flash: { 
     swf: './#/assets/video-js.swf' 
    }, 
    poster: './#/assets/logo.png', 
    sources: [ 
    ] 
    } 
} 
+0

고마워, 나는 바쁘지만 다음주에이 솔루션을 시도 할 것이다. – pymarco

+0

감사합니다. – pymarco