Question

<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？

Answer 1

作为一种解决方法，我最终将初始比例值设置为0.1而不是0，即：-webkit-transform：scale（0.1）;

在ipad上缩放（或切换显示）html5视频不可见

1 个答案: