Question

我希望视频循环播放三次。

我尝试过制作for循环但是没有用。

有谁知道。 我有这个HTML视频。

这个JS

(function() {
    Floating.setup({
        clicktag: dhtml.getVar('clickTAG', 'http://bandholmhotel.dk/da/book-stay'),
        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
};

}）（）;

我希望视频完全循环3次。

我该怎么做。

Answer 1

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

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

另外，我好奇知道为什么你想要一个视频只循环三次......

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

Answer 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>

如何仅将视频循环3次

2 个答案: