我在寫視訊暫停時，出現暫停圖示的時候，遇到了定位的問題
得出的解決方案，記錄如下：

最終效果如上圖所示，播放按鈕在視訊中間。

建立元素

暫停圖示span

 <span id="tipStop" class="iconfont icon-icon_video noshow" style="font-size:2em"></span>

為了能實現span與video的相對定位，故建立了一個class="svedio"的div，作為他們兩個的父div

            <div class="svedio">
                <!-- 下面元素預設隱藏 -->
                <span id="tipStop" class="iconfont icon-icon_video noshow" style="font-size:2em"></span>
                <video src="./source/video/旋轉複製_x264.mp4"></video>
            </div>
 

其中，父div的樣式設定如下

.svedio {
    position: relative;
    font-size: 2em;
    /* color:rgb(19, 141, 255); */
    color: #FD70A1;

}

暫停圖示顯示時，應該擁有的樣式如下：

.fly-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2em;
    box-shadow: 1px 0px 1px 0px rgb(19, 141, 255, 0.5);
}
 

<span id="tipStop" class="iconfont icon-icon_video noshow fly-center" style="font-size:2em"></span>

在視訊未暫停時，是不出現這個圖示的，檢視暫停，才會出現

我們只需要用JavaScript控制即可

監聽到播放，就增加noshow（也就是display:none）,這個圖示就不會顯示，也不會佔位置

監聽到暫停，就移除noshow，這個圖示就顯示出來了