<video>宽高设1然后播放展开的问题?

Question

参考别人的把video宽高先设1,然后播放之后展开全屏...但是实际我这边效果会先空白,然后展开全屏???不知道怎么回事?

<div>封面

<video id="media" src="/static/33.mp4"  webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"  preload="auto" poster="" height="1" width="1"></video>

v.style.width=window.innerWidth+'px';
v.style.height=window.innerHeight+'px';

我在手机上先点播放后,先让封面消失,然后播放,中间会先一闪白屏,那个video高只要三分之一吧大概,然后一会才跳全屏??不知道扎回事?

Answer 1

看你加了x5私有属性，应该是微信平台上的视频问题吧？
<video>标签里的属性，首先poster可以去掉，因为性能不好（用poster的话，播放时肯定会跳一下）；另外height和width为1这个我觉得没必要加，js初始化时用：

v.width=window.innerWidth+'px';
v.height=window.innerHeight+'px';

动态设置下大小就可以了。（注意你那里设置的是style，实际上应该直接设置property）
而style上真正应该调整的是object-position和object-fit两个属性，这个直接用CSS设置就好。

更具体的内容可以参考拙作，这里就不再展开了~