<video width="910" height="544" controls>
<source src="resources/videos/movie1.mp4" type="video/mp4">
</video>
我有一个 HTML5 视频,我最初需要隐藏它,所以我尝试了一个 webkit 转换来扩大它:
vidWrapper {
-webkit-transition: all .5s ease-in-out;
-webkit-transform: scale(0);
}
.vidWrapper.active {
-webkit-transform: scale(1);
这也是我用来放大视频的 .js 代码。我不得不使用超时,因为在显示视频后,dom 似乎需要一个机会来捕捉,然后我才能放大它:
setTimeout(function(){
debugger;
scope.m_vidWrapper.addCls('active');
},200,scope)
**注意,如果我删除了 setTimeout,只需调用 scope.m_vidWrapper.addCls('active'); 要开始过渡,视频就会出现。并且不能很好地从 0 放大到 1
,这将适用于 Chrome 和 Safari,但不适用于 ipad。我还尝试将显示从无切换到阻止,但它仍然不会显示。我已经看到如果我离开页面我试图显示的视频会闪烁可见,所以它似乎在那里但也许在我扩大后必须以某种方式刷新 DOM?