7 
<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){

                var counter = 0;
                var numOfTracks = $(".audio-player").length;
                $("#play-bt").click(function(){
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $("#message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    $("#message").text("Music Stopped");
                })

                $("#next-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter++;


                    if(counter > numOfTracks - 1){
                        counter = 0 ;
                    }

                    $(".audio-player")[counter].play();
                    $("#message").text("Next Track started");
                })

                $("#prev-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter--;
                    $(".audio-player")[counter].play();
                    $("#message").text("Previous Track");
                })

                $(".audio-player").bind('timeupdate', function(){

                    //Gets the whole duration of the track.
                    //No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**
                    var track_length = $(".audio-player")[counter].duration;
                    var secs = $(".audio-player")[counter].currentTime;
                    var progress = (secs/track_length) * 100;

                    $('#progressbar').css({'width' : progress * 2});

                    //Will Use these later on production
                    //NOTE DO NOT DELETE
                    //Track Minutes
                    var tcMins = parseInt(secs/60);
                    //Track Seconds
                    var tcSecs = parseInt(secs - (tcMins * 60));

                    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

                    // Display the time. REMEMBER
                    $('#timecode').html(tcMins + ':' + tcSecs);
                })
            })
        </script>
            <style>

        /*Seperate this some time in the development*/

        #playerContainer{ 
            background-color: #A8A8A8  ; 
            width: 260px; 
            height: 55px;
            padding: 8px;
            border: 1px solid #d0d0d0;
        }
        /* Player Controls */

        /*list items of controls */

        #playerControls li { 
            display: block; 
            width: 32px; 
            height: 32px; 
            padding: 0px;
            float: left; 
            cursor: pointer;
        }

        #playerControls { list-style: none; padding: 0px; margin: 0px;}

        /*Images for each li items items */
        #play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }
        #pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}
        #next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}
        #prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}

        /*Progress Stuff*/


        /*Remember to manipulate its width via javascript later*/
        #progressContainer 
        { 
            background-color:#e0e0e0;
            height: 14px; 
            width: 256px; 
            float: left;
            margin-left: 0px;
        }

        #progressbar {background-color: #1384bb; height:14px; width:0%; }

            </style>
    </head>
<body>
            <audio class ="audio-player"  name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" >
                <p>Sorry your file doesn't support html5</p>
            </audio>
            <!--Second Track For Testing Purposes-->
            <audio  class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio>

            <div id="message"></div>
                <div id = "playerContainer">

                    <ul id =  "playerControls" >
                        <li id = "prev-bt"></li>
                        <li id= "play-bt"></li>
                        <li id= "pause-bt"></li> 
                        <li id = "next-bt"></li>
                        <li id= "stop-bt" ></li>
                        <li><span id ="timecode"></span></li>

                    </ul>
                        <div id="progressContainer"><!-- Progess bars container //-->
                            <div id="progressbar"></div>
                        </div>
                </div>

            </div>



    </body>
</html>

如何单击进度条的某个部分，以便将其移动到轨道中的不同时间？我不知道我将如何做到这一点。有任何想法吗 ？

4

4 回答 4

18

给定一些看起来像这样的 html：

<div class="container">
    <video class="video">
        <source></source>
    </video>
    <progress min="0" max="100" value="0"></progress>
    <div class="controls"></div>
</div>

为了通过点击事件寻找视频中的特定时间，js 看起来像这样：

var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);

function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressBar.value = percent / 100;
}

但是，这并没有解决如何在单击/拖动时进行搜索（就像大多数视频播放器一样）。包含脚本

于 2015-09-27T04:23:38.900 回答
2

我今天遇到了这个问题，因为我正在创建一个自定义 HTML5 视频播放器并且有同样的问题。只是关于视频而不是音频。这个过程应该是一样的。

我找到了这篇文章，并且能够将其中的进度条部分合并到我的播放器中。https://msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

progressbar而不是像我正在做的那样使用元素，或者div像你正在做的那样使用元素，这里的技巧是使用画布元素。

<canvas id='progress-bar' width="200" height="20" style="border:1px solid green;">canvas not supported</canvas>

然后在你的 JavaScript 中，创建一个句柄来引用它

var mediaPlayer;
var progressBar;
var canvas;

加载文档时，初始化包括进度条项在内的所有内容

mediaPlayer = document.getElementById('media-video');
progressBar = document.getElementById('progress-bar');
canvas = document.getElementById('progress-bar');

canvas.addEventListener("click", function(e) {

    var canvas = document.getElementById('progress-bar');

    if (!e) {
        e = window.event;
    } //get the latest windows event if it isn't set
    try {
        //calculate the current time based on position of mouse cursor in canvas box
        mediaPlayer.currentTime = mediaPlayer.duration * (e.offsetX / canvas.clientWidth);
    }
    catch (err) {
    // Fail silently but show in F12 developer tools console
        if (window.console && console.error("Error:" + err));
    }
}, true);

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

然后在初始化函数之外创建一个函数供timeupdate监听器调用并自动为您更新进度条

function updateProgressBar() {        
    mediaPlayer = document.getElementById('media-video');
    //get current time in seconds
    var elapsedTime = Math.round(mediaPlayer.currentTime);
    //update the progress bar
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        //clear canvas before painting
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.fillStyle = "rgb(255,0,0)";
        var fWidth = (elapsedTime / mediaPlayer.duration) * (canvas.clientWidth);
        if (fWidth > 0) {
            ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
        }
    }
}

我还没有完全清理干净。因此，相同 id 的冗余句柄。但我相信你明白了。

于 2015-04-08T18:24:07.223 回答
1

希望这可以节省一些时间。如果您尝试在 Angular 应用程序中进行设置，您会注意到this您的控制器上下文。所以你需要使用e.srcElement.clientWidth它才能工作。

vm.setPosition = function(e){

  var percent = ((e.offsetX / e.srcElement.clientWidth));

  vm.songObject.setProgress(percent);
}
于 2016-07-04T01:54:36.047 回答
-4

我在使用 HTML5 多媒体组件 - 第 3 部分：自定义控件中写过关于此的内容，向下滚动到“添加进度条”。

于 2012-07-29T19:14:05.833 回答