带有javascript循环的HTML5视频

Question

not had much luck in trying to figure this out.

I have a video tag with a video in like so:

    <video id="video" preload="auto" tabindex="0" controls poster="img/layout/Untitled-1.jpg">
        <source type="video/mp4" src="video/1.mp4" >
        Sorry, your browser does not support HTML5 audio.
    </video>
    <ul id="playlist">
        <li class="active"><a href="video/1.mp4">GetFighted</a></li>
        <li><a href="video/2.mp4">ThatGirlPossessed</a></li>
        <li><a href="video/3.mp4">WhiteDevil</a></li>
    </ul>

And using javascript and jquery im trying to loop through the list items (this list could be longer or shorter it will be user controlled ) and put them into the video itself, this works fine with this:

jQuery(document).ready(function($) {
    var video;
    var playlist;
    var tracks;
    var current;


    init();
    function init(){
        current = 0;
        video = $('video');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length;
        video[0].volume = .50;
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, video[0]);
        });

        video[0].addEventListener('ended',function(e){
            $('#video').animate({opacity: 0}, 500);
            setTimeout(function(){
                current++;
                if(current == len){
                    current = 0;
                    link = playlist.find('a')[0];
                    console.log('here 1');  
                } else  {
                    link = playlist.find('a')[current];
                    console.log('here');    
                }

                $('#video').animate({opacity: 1}, 500);
                run($(link),video[0]);
            },500);
        });
    }

    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            video[0].load();
            video[0].play();
    }


});

(this code was taken from another source as a reference, i forget where). However what i am having trouble in doing is stopping the video once it has looped through all 3. The console log 'here 1' triggers once all 3 videos have played but i can't figure how to stop the video once it has played through once.

Any help would be fantastic.

Answer 1

Just add

video[0].addEventListener('loadstart', function(e){
  video[0].pause();
});

before your

console.log('here 1');