HTML5教程小播放器案例讲解-职坐标

HTML5教程小播放器案例讲解

沉沙 2018-09-20 来源：阅读 2144 评论 0

摘要：本篇教程探讨了HTML5教程小播放器案例讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5教程小播放器案例讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
下面是我用新标签做的小案列：

　

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #video{
     border: 5px outset #EE82EE;
      margin-top: 30px;
      border-radius: 20px;

    }
    #button{
     border: 1px dashed #800080;
     border-radius: 50px;
     background-color: #EE82EE ;
    }
  </style>
</head>
<body>
  <center>
   <video src="madia/video.mp4" id="video" controls="controls"></video>
   </br>
   <button id="button" onclick="ks()">开始</button>
   <button id="button" onclick="zt()">暂停</button>
   <button id="button" onclick="upper()">加大音量</button>
   <button id="button" onclick="lower()">减小音量</button>
   <button id="button" onclick="jingyin(this)">静音</button>
   <button id="button" onclick="jiasu(this)">加速</button>
   <button id="button" onclick="jiansu()">减速</button>
  </center>

  <script>
  var video=document.getElementById("video");
   function ks(){
    video.play();
   }
   function zt(){
    video.pause();
   }
   function upper(){
    video.volume+=0.2;//video.volume+0.2
   }
   function lower(){
    video.volume-=0.2;
   }

   function jingyin(obj){
    if(video.muted){
     obj.innerHTML="静音";
     video.muted=false;//打开音量
    }else{
     obj.innerHTML="声音";
     video.muted="true";//关闭音量
    }
   }


   function jiasu(){
    video.currentTime+=2;
   }
   function jiansu(){
    video.currentTime-=2;
   }

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