Question

我碰巧弄清楚了为什么，或者至少是关于为什么它打破了我的swapNodes函数的理论：我认为insertBefore创建了insertBefore第一个参数的副本，而不是实际移动它。我注意到了这一点，因为当isHorizontal为true时，视频没有中断。我将JS更改为以下内容，并且看起来效果很好：

//works
function swapNodes(node1, node2) {
    if(isHorizontal){
        node1.parentNode.insertBefore(node1,node2);
    }
    else{
        //puts node1 as the last child of parentNode
        //which happens to be under node2.
        node1.parentNode.insertBefore(node1,null);
    }
}

我有两个div，其中一个包含标签，我需要根据设备方向（主要是移动设备）交换方向，而我的JS代码是这样的：

function swapNodes(node1, node2) {
if(isHorizontal){
    node1.parentNode.insertBefore(node1,node2);
}
else{
    node1.parentNode.insertBefore(node2,node1);
}}

在台式机上效果很好，但在移动设备上，我已经在safari iOS上进行了测试，即使在全屏模式下，它也可以重新加载视频。除了编写更好的CSS代码之外，还有其他解决方法吗？我不想节省视频的时间并等待视频重新加载，然后再将其设置为正确的点，因为这会中断视频。

E：刚在我的iPhone上试用过Chrome，但它也坏了。

Answer 1

由于您使用flex，因此建议您使用CSS属性order，而不要在DOM中移动元素。

所以您的代码会更简单：

window.addEventListener('orientationchange', changeOrientation);

function changeOrientation() {
  document.getElementById("row")
    .className = Math.abs(window.orientation) !== 90 ? "rowv" : "rowh";
}

.rowh {
  display: flex;
  flex-direction: row;
}

.rowv {
  display: flex;
  flex-direction: column;
}

.columnleft {
  flex: 50%;
  min-height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  order: 0;
}

.columnright {
  flex: 50%;
  min-height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  order: 1;
}

.rowv .columnleft {
  order: 1
}

.rowv .columnright {
  order: 0
}

.underText {
  color: black;
  font-size: 45px;
  font-family: 'Open Sans';
  font-weight: bold;
  display: block;
  width: 100%;
  text-align: center;
}

video {
  width: 100%
}

<div id="row" class="rowh">
  <div id="cleft" class="columnleft">
    <ul id="listFiles">
      <li><a id="sampleli" href="index.html">Loading</a></li>
    </ul>
  </div>
  <div id="cright" class="columnright">
    <video id="centeredVid" class="vp" preload="metadata" controls>Your browser does not support the video tag.
		<source id="vsrc" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4">
	</video>
    <div class="underText" id="underVid"></div>
  </div>
</div>

JS insertBefore在iOS上暂停视频元素

1 个答案: