Vue.js vue-video-player呈現100px寬

Question

我已開始整合vue-video-player。玩家的渲染寬度只有100px。我不知道爲什麼或如何改變它。

我一直沒能在文檔中找到任何東西。事實上，包含css文件有點令人困惑，我不確定我的導入（與文檔中的require）是否正確。

如何設置播放器的寬度？

<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> 

Answer 1

在playerOptions

設置寬度和高度

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: [ 
    ] 
    } 
}