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