Safari 10上的视频标签会在几秒钟后上升 [英] Video tag on Safari 10 goes up after few seconds

问题描述

在复制视频后的几秒钟内，视频上升了50％，并显示了控件和视频的下半部分。

after few seconds on reproducing the video, the video goes up 50% and shows the controls and just bottom half of the video.

这个问题只发生在Safari 10，尝试在Safari 9（和其他浏览器），它工作正常，
我已经转载问题上 https://jsfiddle.net/antonino_R/d9tf0va3/4/

this issue happens only on Safari 10, tried on Safari 9 (and other browsers) and it works fine, i've reproduced the issue on 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（我试图在屏幕中间放置标题和副标题）

and this is the css (i'm trying to have title and subtitle in the middle of the screen)

.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;
}

似乎safari改变了它对待视频标签的方式

seems like safari has changed the way it treats the video tags

推荐答案

我发现问题：
基本上将视频定位在中间，隐藏了控件，而控件 HTML标签上的属性迫使视频拥有控件，Safari会强制显示控件，这就是为什么几秒钟后视频被推到顶端，只是为了显示控件

I've found the issue: basically having the video positioned in the middle was hiding the controls, and the "controls" attribute on the html tag was forcing the video to have the controls, safari forces the controls to be shown that's why after few seconds the video gets pushed to the top, just to show the controls

只是删除controls属性就可以解决问题：

just removing the "controls" attribute fixes the issue:

（这里是jsFiddle： https://jsfiddle.net/antonino_R/d9tf0va3/14/ ）

(here the 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更清晰：

and the css is cleaner:

.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;
}

这篇关于Safari 10上的视频标签会在几秒钟后上升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！