码迷,mamicode.com
首页 > 其他好文 > 详细

实现视频音频基本功能

时间:2018-10-14 20:56:20      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:stop   idt   console   button   VID   --   播放   value   free   

<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>

 

实现视频音频基本功能

标签:stop   idt   console   button   VID   --   播放   value   free   

原文地址:https://www.cnblogs.com/150536FBB/p/9787465.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!