1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>复仇者联盟</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       *,body{
    8.         padding:0;
    9.         margin:0;
    10.       }
    11.       .main{
    12.         width:600px;
    13.         height:400px;
    14.         background-image:url("res/htmlclassics/full/images/page2_bg.png");
    15.           background-position:center;
    16.           background-repeat:no-repeat;
    17.       }
    18.       .view_div{
    19.         width:500px;
    20.         margin:0 auto;
    21.         position:relative;
    22.           background-size:cover;
    23.       }
    24.       #vo{
    25.         width:500px;
    26.         height:400px;
    27.         background-color:black;
    28.       }
    29.       #controls{
    30.         width:500px;
    31.         height:50px;
    32.         position:absolute;
    33.         left:0px;
    34.         bottom:5px;
    35.         background-color:rgba(0,0,0,0.5);
    36.         display:none;
    37.         justify-content:space-between;
    38.       }
    39.       .left{
    40.         display:flex;
    41.         flex-direction:row;
    42.         justify-content:space-around;
    43.         align-items:center;
    44.         width:300px;
    45.       }
    46.       .left img{
    47.         width:30px;
    48.         height:30px;
    49.       }
    50.       #txt{
    51.         width:60px;
    52.         margin-right:-70px;
    53.       }
    54.       .btn{
    55.         width:40px;
    56.       }
    57.       input{
    58.         height:30px;
    59.         line-height:30px;
    60.         border-radius:8px;
    61.       }
    62.       .right{
    63.         width:200px;
    64.         display:flex;
    65.         flex-direction:row;
    66.         justify-content:space-around;
    67.         align-items:center;
    68.       }
    69.       .view_div:hover #controls{
    70.         display:flex;
    71.       }
    72.     </style>
    73.     <script>
    74.       var isPlay = true;
    75.       function bofang(){
    76.         var vo = document.getElementById("vo");
    77.         if(isPlay){
    78.           vo.play();
    79.           document.getElementById("playBtn").src="res/htmlLX/zanting.png";
    80.           isPlay = false;
    81.         }else{
    82.           vo.pause();
    83.           document.getElementById("playBtn").src="res/htmlLX/bofang.png";
    84.           isPlay = true;
    85.         }
    87.       }
    89.       function getTime(){
    90.         vo.currentTime = document.getElementById("time").value;
    91.       }
    92.       function back(){
    93.         vo.currentTime -= 10;
    94.       }
    95.       function forward(){
    96.         vo.currentTime += 10;
    97.       }
    99.     </script>
    100.   </head>
    101.   <body>
    102.     <div class="main">
    103.     <!--视频-->
    104.     <div class="view_div">
    106.       <!--视频-->
    107.       <video id="vo"
    108.          src="res/htmlclassics/full/video/avenger.mp4"
    109.          poster="res/htmlclassics/full/images/video_bg.png">
    110.       </video>
    113.       <!--控制按扭-->
    114.       <div id="controls">
    116.         <!--左侧按扭-->
    117.         <div class="left">
    118.           <img id="playBtn" src="http://www.yyfun001.com/res/htmlLX/bofang.png" onclick="bofang()" />
    119.           <input id="time" type="text"/>
    120.           <input class="btn" type="button" value="跳转" onclick="getTime()" />
    121.         </div>
    123.         <!--右侧按扭-->
    124.         <div class="right">
    125.           <input type="button" value="倒退 10 秒" onclick="back()" />
    126.           <input type="button" value="快进 10 秒" onclick="forward()" />
    127.         </div>
    128.       </div>
    129.     </div>
    130.     </div>
    131.   </body>
    132. </html>

    2021-09-25_183909.jpg2021-09-25_183919.jpg