如何仅循环播放视频 3 次？答案

【问题标题】：How to loop a video 3 times only?如何仅循环播放视频 3 次？
【发布时间】：2017-07-07 10:03:40
【问题描述】：

我只想循环播放视频三遍。在 for 循环中渲染它似乎无法正常工作。

我想知道如何处理 HTML 视频。

我有这个 HTML 视频。

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

还有这个JS

(function() {
    Floating.setup({
        clicktag: dhtml.getVar('clickTAG', 'http://example.com'),
        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
};


})();

该视频将用作广告，因此我只会循环播放它三次。

我看过这些帖子，但它们似乎不起作用：

Loop HTML5 video Prop video loop

我该怎么做？

【问题讨论】：

Limit the number of times an HTML5 video plays的可能重复
我试过了，但没有成功。

标签： javascript jquery html

【解决方案1】：

查看标准 HTML5 视频元素的 onended 事件处理程序。使用整数计数器设置一个简单的 JS 事件函数，并在计数器达到 3 时使用视频元素的pause 功能。此链接应该会有所帮助！

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

另外，我很好奇知道为什么您希望视频只循环三次...

无论如何，如果功能有点类似于应该播放 3 次的小动画（小视频），请考虑制作一个包含三个硬的 GIF 动画-编码重复！

【讨论】：

感谢您的帮助。我也希望它循环三次，因为它是用于广告的。

【解决方案2】：

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>

【讨论】：