移動端隱藏video默認play圖標技巧

在video標簽下，系統會默認顯示內置的播放圖標，美不美觀另說，但在很大程度上，這個圖標都難以和項目的整體風格保持一致。

查看文檔，我們發現可以通過去掉 controls 屬性去掉播放圖標，但是如果你的項目需要適配移動端，你就會發現，這一屬性失效了，無論如何，play圖標都會突兀的顯示在頁面上。

那么到底該如何去掉這個圖標呢？下面分享一種我認為可行的方法，歡迎大家一起分享交流。

簡單點說就是在移動端不顯示真正的video標簽，而是通過相對定位將video位置放在top:10000px以外或其他看不到的位置，然后再自己寫一個play圖標。通過自己設置的play圖標來控制播放。

下面是demo

HTML

                <li class="videobox">
                    <video width="100%" id="video1">
                        <source src="resources/bg.mp4" type="video/mp4">
                        <source src="resources/bg.ogv" type="video/ogg">
                    </video>
                    <div class="video-poster">
                        <img src="images/video/bg.jpg">
                        <div class="i play"></div>
                    </div>
                    <p>Funniest Football Fails Compilation -- FailArmy</p>
                </li>

 

CSS

.m-video li{width:49%;float:left;margin-right:2%;margin-bottom:.2rem;color:#333;position: relative;}
.m-video li video{position: absolute;width:100%;top: -1000px;}
.i.play{position:absolute;width:60px;height:60px;left:50%;margin-left:-29px;top:50%;margin-top:-31px;background:url(../images/static/play.svg) 0 0 no-repeat rgba(0,0,0,.3);background-size:contain;box-shadow:0 0 3px rgba(0,0,0,.3);border-radius:30px;}

 

JS

var myVideo = document.getElementById("video1");
    var videoBox = $(".videobox");
    videoBox.onClick = function() {
        playPause()
    }

    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause()
    }
})