Каков наилучший способ минимизировать скачки при загрузке проигрывателя VideoJS Fluid?

Question

Я использую v5.5.3 VideoJS, и я использую довольно восхитительную опцию отзывчивости, подробно описанную в этом посте в блоге VideoJS (документация немного нестабильна: на данный момент этот пост в блоге кажется единственным местом, где описана опция),

Моя видео разметка выглядит так:

<div class="video-js-container">
    <video id="1234" class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="metadata"
        poster="http://vjs.zencdn.net/v/oceans.png"
        data-setup='{"fluid":true}'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
</div>

Это плавно изменяет размеры видео, как рекламируется. Но я обнаружил, что при загрузке страницы она подвергается различным искажениям при загрузке тега видео HTML5, а затем версии VideoJS, размер которой затем изменяется. Страница прыгает много. Я хотел бы либо ограничить исходные размеры, либо ограничить их и скрыть проигрыватель до завершения процесса загрузки и изменения размера. Кто-нибудь может предложить лучший способ? Существует ли класс VideoJS, чтобы указать, что проигрыватель загружен, визуализирован и изменен в размере?

Answer 1

Я обнаружил, что прыгать вокруг не было ошибкой VideoJS - у меня было уже существующее правило CSS, позволяющее плавно изменять размер видео:

video {
    width: 100%;
    height: auto !important;
}

Это приводило к тому, что проигрыватель VideoJS имел большую высоту во время загрузки, прежде чем библиотека JS вступила в силу и обернула video элемент с .video-js дела. Я обнаружил, что только исключая .video-js Из правила получилось красиво загрузить игроков:

video:not(.video-js) {
    width: 100%;
    height: auto !important;
}

Answer 2

Форсирование статических размеров предотвратило дальнейшее изменение размеров для меня:

.video-js {
    width:850px;
    height:477px;
}