javascript - How to loop a video 3 times only? - Stack Overflow

I want to loop a video three times only. Rendering it in a for loop doesn't seem to work properly.

I am wondering how to do this with an HTML video.

I have this HTML video.

<div id="video" class="Adform-video"></div>

And this JS

(function() {
    Floating.setup({
        clicktag: dhtml.getVar('clickTAG', ''),
        target: dhtml.getVar('landingPageTarget', '_blank'),
        video: {
            sources: dhtml.getVar('videoSources'),
            poster: dhtml.getAsset(3),
            clicktag: dhtml.getVar('clickTAG')
        }
    });

    Floating.init();

})();
var Floating = (function() {

var videoPlayer;

var banner = dhtml.byId('banner'),
    closeButton = dhtml.byId('closeButton'),
    video = dhtml.byId('video'),
    clickArea = dhtml.byId('click-area'),
    lib = Adform.RMB.lib;

function setup(settings) {
    for (var prop in settings) {
        if (_settings[prop] instanceof Object) {
            for (var prop2 in settings[prop]) {
                _settings[prop][prop2] = settings[prop][prop2];
            }
        } else {
            _settings[prop] = settings[prop];
        }
    }
}

var _settings = {
    clicktag: null,
    target: null,
    video: null
};

function init() {
    createVideoPlayer();
}

closeButton.onclick = function (event) {
    dhtml.external.close && dhtml.external.close();
};

clickArea.onclick = function() {
    stopVideo();
    window.open(_settings.clicktag, _settings.target);
};

 function createVideoPlayer() {

    var videoSettings = _settings.video;

 videoPlayer = Adform.Component.VideoPlayer.create({
        sources: videoSettings.sources,
        clicktag: videoSettings.clicktag,
        loop: videoSettings.loop,
        muted: videoSettings.muted,
        poster: videoSettings.poster,
        theme: 'v2'
    });

if (videoPlayer) {
        videoPlayer.removeClass('adform-video-container');
        videoPlayer.addClass('video-container');
        videoPlayer.appendTo(video);
    }

    function landPoster() {
        if(!lib.isWinPhone) {
         videoPlayer.video.stop();
        }
    } 

    videoPlayer.poster.node().onclick = landPoster;

    if (lib.isAndroid && lib.isFF) {
        lib.addEvent(video, 'click', function(){}, false);
    }
}

function stopVideo() {
    if (videoPlayer.video.state === 'playing') videoPlayer.video.pause();
}

return {
    setup: setup,
    init: init
};


})();

The video will be used as an ad, and therefore I will only loop through it trice.

I have looked at these posts but they didn't seem to work:

Loop HTML5 video Prop video loop

How can I do that?

I want to loop a video three times only. Rendering it in a for loop doesn't seem to work properly.

I am wondering how to do this with an HTML video.

I have this HTML video.

<div id="video" class="Adform-video"></div>

And this JS

(function() {
    Floating.setup({
        clicktag: dhtml.getVar('clickTAG', 'http://example.'),
        target: dhtml.getVar('landingPageTarget', '_blank'),
        video: {
            sources: dhtml.getVar('videoSources'),
            poster: dhtml.getAsset(3),
            clicktag: dhtml.getVar('clickTAG')
        }
    });

    Floating.init();

})();
var Floating = (function() {

var videoPlayer;

var banner = dhtml.byId('banner'),
    closeButton = dhtml.byId('closeButton'),
    video = dhtml.byId('video'),
    clickArea = dhtml.byId('click-area'),
    lib = Adform.RMB.lib;

function setup(settings) {
    for (var prop in settings) {
        if (_settings[prop] instanceof Object) {
            for (var prop2 in settings[prop]) {
                _settings[prop][prop2] = settings[prop][prop2];
            }
        } else {
            _settings[prop] = settings[prop];
        }
    }
}

var _settings = {
    clicktag: null,
    target: null,
    video: null
};

function init() {
    createVideoPlayer();
}

closeButton.onclick = function (event) {
    dhtml.external.close && dhtml.external.close();
};

clickArea.onclick = function() {
    stopVideo();
    window.open(_settings.clicktag, _settings.target);
};

 function createVideoPlayer() {

    var videoSettings = _settings.video;

 videoPlayer = Adform.Component.VideoPlayer.create({
        sources: videoSettings.sources,
        clicktag: videoSettings.clicktag,
        loop: videoSettings.loop,
        muted: videoSettings.muted,
        poster: videoSettings.poster,
        theme: 'v2'
    });

if (videoPlayer) {
        videoPlayer.removeClass('adform-video-container');
        videoPlayer.addClass('video-container');
        videoPlayer.appendTo(video);
    }

    function landPoster() {
        if(!lib.isWinPhone) {
         videoPlayer.video.stop();
        }
    } 

    videoPlayer.poster.node().onclick = landPoster;

    if (lib.isAndroid && lib.isFF) {
        lib.addEvent(video, 'click', function(){}, false);
    }
}

function stopVideo() {
    if (videoPlayer.video.state === 'playing') videoPlayer.video.pause();
}

return {
    setup: setup,
    init: init
};


})();

The video will be used as an ad, and therefore I will only loop through it trice.

I have looked at these posts but they didn't seem to work:

Loop HTML5 video Prop video loop

How can I do that?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 8, 2019 at 13:39 asked Feb 17, 2017 at 18:51 user7576961user7576961 3

• Possible duplicate of Limit the number of times an HTML5 video plays – PMA Commented Feb 17, 2017 at 18:58
• I tried that but with no luck. – user7576961 Commented Feb 17, 2017 at 19:00
• See this answer that I posted using jQuery: https://stackoverflow./a/71605217/18569980 – Shirls Commented Mar 24, 2022 at 15:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Check out the standard HTML5 video element's onended event handler. Set up a simple JS event function with a integer counter and use the pause feature of video element when counter reaches 3. This link should help!

https://www.w3schools./TAGS/av_event_ended.asp

Also, I'm curious to know why exactly you want a video to loop only thrice...

Anyway, if the functionality is somewhat similar to a small animation(of a small video) which should be played 3 times, consider making a GIF animation with three hard-coded repetitions!

PROBLEM SOLVED
  <!DOCTYPE html> 
    <html> 
    <body> 
    <video id="myVideo" width="320" height="176" autoplay controls>
      <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
      Your browser does not support the audio element.
    </video>

    <script>
    var aud = document.getElementById("myVideo");
    var a=0;
    aud.onended = function() {
       a=a+1;
       if(a!=3)
       {
        aud.play();
        }
    };
    </script>

    </body> 
    </html>