实现视频音频基本功能 

<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" />
        <style type="text/css">
            .camera {
                color: red;
                font-size: 42px;
            }
        </style>
    </head>

    <body>
        <!--声频-->
        <audio controls="controls" autoplay="autoplay">
            <source src="south Mountain.mp3" type="audio/mp3"></source>
            <source src="horse.ogg" type="audio/ogg"></source>
        </audio>
        <input type="button" name="" id="speed" value="加速" />
        <br />
        <!--视频-->

        <video controls="controls" width="400">
            <source src="demo.mp4" type="video/mp4"></source>
        </video>
        <div class="camera">
            <i class="fa fa-camera-retro"></i>
            <i class="fa fa-free-code-camp"></i>
        </div>
        <input type="button" name="" id="play" value="播放" />
        <input type="button" name="" id="stop" value="暂停" />
        
    </body>
    
    <script type="text/javascript">
        var oVideo = document.querySelector("video");
        var oAudio = document.querySelector("audio");
        console.dir(oVideo);
        var oSpeed = document.getElementById("speed");
        var oPlay = document.getElementById("play");
        var oStop = document.getElementById("stop");
        //倍速播放
        oSpeed.onclick = function() {
            console.dir(oAudio);
            oAudio.playbackRate = 3;
        }

        //视频播放
        oPlay.onclick = function() {
            oVideo.play();
        }
        //暂停
        oStop.onclick = function() {
            oVideo.pause();
        }

        oVideo.onplay = function() {
            console.log(this.currentTime);
        }
        oVideo.ontimeupdate = function() {
            console.log(this.currentTime);
        }
        
    </script>

 

posted @ 2018-10-14 19:15  氧化成风  阅读(118)  评论(0)    收藏  举报