Question

我正在使用VideoJS的v5.5.3，并且我正在使用此VideoJS blog post中详述的相当令人愉快的响应选项（文档＆＃39;有点不完整：at这篇博文似乎是唯一可以解释选项的地方。

我的视频代码标记如下所示：

<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

强制静态尺寸阻止我进一步调整大小：

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

Answer 2

我发现跳转并不是VideoJS的错 - 我有一个预先存在的CSS规则来为视频提供流畅的尺寸：

SELECT     pename,coname,presdoc 
FROM       pe 
LEFT JOIN  co ON coid=peco 
LEFT JOIN  pres ON prespe=peid 
WHERE      peco = 1 AND presdoc=2 
UNION
SELECT     pename,coname,NULL AS present FROM pe 
LEFT JOIN  co ON coid=peco
WHERE      peco=1 AND peid NOT IN(SELECT prespe FROM pres WHERE presdoc=2)

这导致VideoJS播放器在加载时具有很大的高度，在JS库生效之前将CREATE TABLE [dbo].[stoptimetable]( [_tripID] [int] NULL, [_stopID] [int] NULL, [stopSequence] [int] NULL, [departureTime] [int] NULL ) ON [PRIMARY] CREATE TABLE [dbo].[temptable2]( [dep5] [int] NULL, [arv4] [int] NULL, [dur4] [int] NULL, [arv5] [int] NULL, [id5] [int] NULL, [dep4] [int] NULL, [dur5] [int] NULL ) ON [PRIMARY] update temptable2 set dep5 = stt.departureTime, arv4 = stt.departureTime, dur4 = arv4-dep4, arv5 = dur5+dep5 from temptable2 as tt join stoptimetable as stt on stt._tripID = tt.dur4 and stt._stopID = tt.id5 and stt.stopSequence = tt.dep5元素包裹在video { width: 100%; height: auto !important; } div中。我发现只要从规则中排除video，玩家就可以很好地加载：

.video-js

在加载VideoJS流媒体播放器时，最小化跳转的最佳方法是什么？

2 个答案: