Safari 10上的视频标签在几秒钟后上升
问题描述:
再现视频后,视频上升50%,并显示控件和视频的下半部分。Safari 10上的视频标签在几秒钟后上升
这个问题只发生在Safari 10,尝试在Safari 9(和其他浏览器),它工作正常, 我已经复制问题上https://jsfiddle.net/antonino_R/d9tf0va3/4/
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrapper-video">
<video autoplay controls loop muted >
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="site-centered clearfix">
<header class="entry-header">
<h1 class="entry-title">this is a title</h1>
<h2 class="entry-subtitle">this is some text</h2>
</header>
</div>
</div>
</div>
,这是CSS(I”米想有标题和副标题在屏幕的中间)
.wrapper {
overflow: hidden;
color: #FFF;
border-top: 6px solid #9BA800;
background-color: #404040;
background: linear-gradient(145deg, #404040 0%, #111 100%);
position: relative;
z-index: 0;
}
.wrapper-video {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
right: 0;
bottom: 0;
}
.wrapper-video video {
width: 100%;
-webkit-filter: opacity(0.6) contrast(1.5);
filter: opacity(0.6) contrast(1.5);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.site-centered {
max-width: 78em;
margin: 0 auto;
padding: 0 1.5em;
}
.wrapper .entry-header {
margin: 7.5em 0 3.5em 0;
font-weight: 300;
line-height: 1.5;
overflow: auto;
z-index: 10;
position: relative;
overflow: visible;
margin-bottom: 4.5em;
}
好像野生动物园已经改变了它把视频标签的方式
答
我发现问题: 基本上,视频位于中间隐藏了控件,而html标签上的“controls”属性迫使视频具有控件,Safari浏览器强制显示控件,这就是为什么几秒钟后,该视频被发布到顶端,只以显示控制
只删除了“控制”属性修复该问题:
(这里的jsfiddle:https://jsfiddle.net/antonino_R/d9tf0va3/14/)
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrapper-video">
<video autoplay loop muted >
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="site-centered clearfix">
<header class="entry-header">
<h1 class="entry-title">this is a title</h1>
<h2 class="entry-subtitle">this is some text</h2>
</header>
</div>
</div>
</div>
和css更清洁:
.wrapper {
overflow: hidden;
color: #FFF;
border-top: 6px solid #9BA800;
background-color: #404040;
background: linear-gradient(145deg, #404040 0%, #111 100%);
position: relative;
z-index: 0;
}
.wrapper-video {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper-video video {
width: 100%;
-webkit-filter: opacity(0.6) contrast(1.5);
filter: opacity(0.6) contrast(1.5);
transform: translateY(-10%);
-webkit-transform: translateY(-10%);
}
.site-centered {
max-width: 78em;
margin: 0 auto;
padding: 0 1.5em;
}
.wrapper .entry-header {
margin: 7.5em 0 3.5em 0;
font-weight: 300;
line-height: 1.5;
overflow: auto;
z-index: 10;
position: relative;
overflow: visible;
margin-bottom: 4.5em;
}