＜video＞标签实现制作视频播放器

最新推荐文章于 2024-06-28 11:57:47 发布

Volcano_WQL

最新推荐文章于 2024-06-28 11:57:47 发布

阅读量529

点赞数 1

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/108545847

版权

标签实现制作视频播放器

使用font-awesome实现小图标，video标签放置视频，设置自动播放、循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .outBox{
            position: absolute;
            display: flex;
            justify-content: flex-end;
            flex-direction: row;
        }
        .inBox{
            display: flex;
            background: rgba(255, 255, 255, 0.5);
            flex-direction: column;
            width: 50px;
            height: 190px;
            position: relative;
            left: -50px;
            top:50px;
           visibility: hidden;
            padding-top: 20px;

        }
        a{
            text-decoration: none;
            color: black;
            text-align: center;
            /*margin-bottom:-7px;*/
        }
        i{
            margin-left: 2px;
        }
        p{
            font-size: 8px;
            margin-top: -2px;
        }
    </style>
    <script>
        function showBtn() {
            let display=document.getElementById("video");
            display.setAttribute('controls',this.controls);
            document.getElementById("inBox").style.visibility="visible";
        }
        function hideBtn() {
            let display=document.getElementById("video");
            display.removeAttribute("controls");
            document.getElementById("inBox").style.visibility="hidden";
        }
    </script>

</head>
<body>
        <div class="outBox" onmouseover="showBtn()" onmouseleave="hideBtn()">
        <video src="video/RADWIMPS2.mp4" id="video" loop autoplay>Your&nbsp;browser &nbsp;can't &nbsp;support&nbsp; the&nbsp; tag&nbsp; of &nbsp;video.</video>
        <div class="inBox" id="inBox">

            <a href="#">
                <i class="fa fa-share-alt-square"></i>
<!--                <img src="images/share.png" alt=""/>-->
                <p>分享</p>
            </a>
                <a href="#">
                    <i class="fa fa-tv "></i>
<!--                    <img src="images/image_quality.png" alt=""/>-->
                    <p>画质</p>
                </a>
                <a href="#">
                    <i class="fa fa-lock"></i>
<!--                    <img src="images/lock.png" alt=""/>-->
                    <p>锁屏</p>
                </a>
                <a href="#">
                    <i class="fa fa-thumbs-up"></i>
<!--                    <img src="images/thumbs_up.png" alt=""/>-->
                    <p>点赞</p>
                </a>
        </div>
        </div>
</body>
</html>

在这里插入图片描述