JS插入之前暂停iOS上的视频元素

Question

我碰巧弄清楚了为什么，或者至少是一个关于为什么的理论，它与我的 swapNodes 函数中断了：我认为 insertBefore 创建了 insertBefore 的第一个参数的副本，而不是实际移动它。我注意到这一点是因为当isHorizontal 为真时，视频似乎没有中断。我将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>