Question

我的离子应用程序有四个本地托管的视频，最后两个“播放按钮”在运行iOS 9但不是iOS 8的设备上显示模糊。我还在iPad Air上进行了测试，只有最后一个播放按钮模糊不清。

当我点击模糊播放按钮时，设备会在设备的默认视频播放器中打开视频。当我点击“完成”退出全屏时，播放按钮不再模糊，但现在不同的播放按钮模糊。令人沮丧。

<ion-content scroll="true" overflow-scroll="true" class="padding has-subheader">
<div class="item item-divider">VFD Overview</div>
    <div class="card">
        <ion-item>
            <div class="video-container">
                <video controls poster="img/vfd_thumbnail.jpg">
                    <source src="vids/VFD_Overview_FINAL.mp4" type="video/mp4"></source>
                </video>
            </div>
        </ion-item>
    </div>
<div class="item item-divider">VFD Basics</div>
    <div class="card">
        <ion-item>
            <div class="video-container">
                <video controls poster="img/basics_thumbnail.jpg">
                    <source src="vids/VFD_Basics_v2.mp4" type="video/mp4"></source>
                </video>
            </div>
        </ion-item>
    </div>
<div class="item item-divider">Dynamic Braking</div>
    <div class="card">
        <ion-item>
        <div class="video-container">
            <video controls poster="img/braking_thumbnail.jpg">
                <source src="vids/VFD_Braking_v1.mp4" type="video/mp4"></source>
            </video>
        </div>
        </ion-item>
    </div>
<div class="item item-divider">PID Control</div>
    <div class="card">
        <ion-item>
            <div class="video-container">
                <video controls poster="img/pid_thumbnail.jpg">
                    <source src="vids/VFD_PID_v1.mp4" type="video/mp4">
                </video>
            </div>
        </ion-item>
    </div>

.video-container {
position: relative;
/*padding-bottom: 30%;*/
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;

}

.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

Screenshot of problem

Ionic App - iOS 5中的HTML5视频叠加播放按钮模糊不清

0 个答案: