Html5通过上一段下一段按钮切换video中src

Playful_Elbow

已于 2022-04-13 15:09:18 修改

阅读量676

点赞数 1

文章标签： html5 javascript

于 2022-04-13 15:08:05 首次发布

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124148598

版权

<!DOCTYPE html>
<html><head>
    <title>复仇者联盟</title>
    <meta charset="utf-8">
    <style type="text/css">
      *,body{
        padding:0;
        margin:0;
      }
      .main{
        width:600px;
        height:314px;
        background:#000;
      }
      #vo{
        width:100%;
        height:249px;
        margin-top:30px;
        background-color:black;
      }
      #controls{
        height:30px;
        width:170px;
        background-color:rgba(0,0,0,0.5);
        display:none;
        position:relative;
        left:50%;
        transform:translate(-50%,-30%);
      }
      #controls img{
        width:30px;
        margin:0 15px;
      }
      .btn{
        width:40px;
      }
      .main:hover #controls{
        display:flex;
      }
      input{
          padding:0 6px;
      }
    </style>
    </head>
<body>
    <div class="main">
      
      <video id="vo" src="res/htmlLX/video/avenger1.mp4" autoplay="autoplay"></video>

<div id="controls">
          <input type="button" value="上一段" οnclick="last();">
             
          <input type="button" value="下一段" οnclick="next();">
      </div>
    </div>

   <script>
      var a = 1;
      //上一段
       function last(){
           if(a==1){
               document.getElementById("vo").src="res/htmlLX/video/avenger1.mp4";
           }else{
          a--;
document.getElementById("vo").src="res/htmlLX/video/avenger"+a+".mp4";
}
      }

      //下一段
      function next(){
          if(a==4){
              document.getElementById("vo").src="res/htmlLX/video/avenger4.mp4";
          }else{
          a++;
document.getElementById("vo").src="res/htmlLX/video/avenger"+a+".mp4";
}
      }

</script>
</body>
</html>

Playful_Elbow

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5通过上一段下一段按钮切换video中src

<!DOCTYPE html><html><head> <title>复仇者联盟</title> <meta charset="utf-8"> <style type="text/css"> *,body{ padding:0; margin:0; } .main{ width:600px; heig...
复制链接

扫一扫