التحكم في حلقة مشغل الفيديو HTML5 مع JavaScript

Question

أتطلع إلى تمكين حلقة فيديو HTML5 في المتصفحات التي لا تدعم علامة الحلقة (FF) مع JavaScript. هل يعرف أي شخص جدوى الوصول إلى نهاية تشغيل الفيديو والعودة إلى الصفر؟

Answer 1

يمكنك اكتشاف ما إذا كان loop الممتلكات مدعومة ، وتعيينها true.

بالنسبة للمتصفحات التي لا تدعمها ، يمكنك ببساطة ربط ended حدث إعلامي ، وابدأه:

var myVideo = document.getElementById('videoId');
if (typeof myVideo.loop == 'boolean') { // loop supported
  myVideo.loop = true;
} else { // loop property not supported
  myVideo.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
  }, false);
}
//...
myVideo.play();

Answer 2

يمكنك ببساطة حلقة الفيديو أو إيقافها loop="false" لإيقاف تشغيل فيديو تكرار الفيديو.

<iframe style="position: absolute; top: 0; left: 0;"
src="http://video/name.mp4" width="100%" height="100%" frameborder="0"  webkitallowfullscreen loop="true" controls="false" mozallowfullscreen allowfullscreen></iframe>

هذه loop="true" سوف تمكين حلقة مشغل الفيديو.

Answer 3

<div>Iteration: <span id="iteration"></span></div>

<video id="video-background" autoplay="" muted="" controls>
        <source src="https://res.sdfdsf.mp4" type="video/mp4">
</video>

var iterations = 1;

    document.getElementById('iteration').innerText = iterations;

        var myVideo = document.getElementById('video-background');
    myVideo.addEventListener('ended', function () {    
                alert('end');
        if (iterations < 2) {
            this.currentTime = 0;
            this.play();
            iterations ++;          
            document.getElementById('iteration').innerText = iterations;
        }   

    }, false);


   // Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox