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 に答える
-4

これについては、HTML5マルチメディアコンポーネントの操作–パート3：カスタムコントロールで、[プログレスバーの追加]まで下にスクロールして書きました。

于 2012-07-29T19:14:05.833 に答える