H50084：纯html全屏视频背景

1，

<!DOCTYPE html>
<html>
<head>
    <title>全屏视频背景</title>
    <meta charset="utf-8">
    <style>
        body,html {
            width: 100%;
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
            pointer-events: none;
            user-select: none;
        }
    </style>
</head>
<body>
    <video id="video1" src="vid/maotai.mp4" width="100%" height="100%" style="object-fit:fill"></video>
</body>
<script>
    var ua = navigator.userAgent.toLowerCase();
    // /iphone|ipad|ipod/.test(ua);
    var _endTime, myVid = document.getElementById("video1");
    function playMedia(e, i) {
        _endTime = i, setCurrentTime(e)
    };
    function setCurrentTime(e) {
        myVid.currentTime = e, myVid.play()
    };
    function timeupdate() {
        var e = myVid.currentTime + "";
        e.substring(0, e.indexOf("."));
        // 循环播放
        _endTime <= e && myVid.play()
    };
    myVid.addEventListener("timeupdate", timeupdate), playMedia(0, 13);
</script>
</html>

 

posted @ 2022-09-22 15:34  琥珀君  阅读(34)  评论(0)  编辑  收藏  举报