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