视频界面

最新推荐文章于 2024-09-13 23:28:46 发布

abcyh999

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量272

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/abcyh999/article/details/105991770

版权

代码如下：



<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>视频播放器制作</title>
  <style type="text/css">
   .contact-info{
    position: fixed;
    top:30%;
    left:89%;
    z-index:9999;
    }
    .option{
    cursor: pointer;
    position: relative;
   }
   .option i,.text{
    display: block;
    width: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: rgba(255, 255, 255,0.1);
    color:orangered;
    font-size:16px;
    transition:0.6s;
    }
    .option:hover i{
    color:palevioletred;
    }
    video{
    width:1250px;
    height:650px;
    margin:0px;
    padding:0px;
    }
    </style>
 </head>
 
 <body>
  <div onmouseover="fun1()" onmouseout="fun2()">
   <video controls>
    <source src="跨年.mp4" type="video/mp4">
   </video> 
    <div class="contact-info" id="display">
      <div class="option">
         <i class="fas-share"></i>
         <div class="text">分享</div>
      <i class="fas fa-tv"></i>
      <div class="text">画质</div>
      <i class="fas fa-lock"></i>
      <div class="text">锁屏</div>
      <i class="fas fa-thumbs-up"></i>
      <div class="text">点赞</div>
     </div>
    </div>
 </div>
 <script>
    function fun1(){
       var p = document.getElementById('display');
        p.style.opacity = 1;
      }
      function fun2() {
          var p = document.getElementById('display');
          p.style.opacity = 0;
      }
   </script>
 </body>
 </html>

效果：
在这里插入图片描述