实现视频音频基本功能

Posted 2021-01-12 150536fbb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现视频音频基本功能相关的知识，希望对你有一定的参考价值。

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

以上是关于实现视频音频基本功能的主要内容，如果未能解决你的问题，请参考以下文章

如何使用两个片段实现视频和视频列表

IOS开发－OC学习－常用功能代码片段整理

Android拍照，录制视频，相机简单功能实现

12mmaction2 行为识别商用级别X3D复现 demo实现检测自己的视频 Expanding Architecturesfor Efficient Video Recognition(代码片段

实现视频音频基本功能

如何将按钮功能添加到片段中