Safari 10 上的视频标签在几秒钟后上升

Posted 2023-02-19

【中文标题】Safari 10 上的视频标签在几秒钟后上升

【英文标题】：Video tag on Safari 10 goes up after few seconds

【发布时间】：2017-07-30 06:44:31

【问题描述】：

在再现视频几秒钟后，视频上升了 50%，并显示了控件和视频的下半部分。

此问题仅在 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（我试图在屏幕中间有标题和副标题）

.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 改变了它处理视频标签的方式

【参考方案1】：

我发现了问题： 基本上将视频放置在中间隐藏了控件，html标签上的“控件”属性强制视频具有控件，野生动物园强​​制显示控件，这就是为什么几秒钟后视频被推送到顶部，只是为了显示控件

只需删除“控件”属性即可解决问题：

（这里是 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;