自制一个视频播放控件

学习了html5新标签后自己尝试写了一个视频控件，虽然不是很好看，但基本功能都实现了。

css：

<style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        #all{
            position: relative;
        }
        #v1{
            position: relative;
        }
        #play{
            position: absolute;
            top:120px;
            left:130px;
            overflow: hidden;
            display: none;
        }
        #play img{
            float: left;
            cursor: pointer;
        }
        #play div{
            margin-left:35px;
            font-size:20px;
            color:#fff;
            display: none;
        }
        #play img:nth-of-type(2){
            margin:20px;
            transition:all linear 2s;
            opacity:1;
        }
        #play img:nth-of-type(1){
            margin-top:35px;
            transition:all linear 2s;
            opacity:1;
        }
        #play img:nth-of-type(3){
            margin-top:35px;
            transition:all linear 2s;
            opacity:1;
        }
        #time{
            position: absolute;
            top:298px;
            background-color: rgba(102,102,102,0.8);
            width:400px;
        }
        #time input:nth-of-type(2){
            float: right;
        }
        #voice{
            position: absolute;
            left:400px;
            width:20px;
            background-color: rgba(102,102,102,0.8);
            height:320px;
            top:0;
        }
        #voice img{
            cursor: pointer;
        }
        #voice div{
            width:8px;
            height:200px;
            background-color: rgba(0,0,0,0.8);
            border-radius: 4px;
            margin-top:60px;
            margin-left: