เล่นวิดีโอแบบวนซ้ำไม่ จำกัด เมื่อโหลดใน HTML5

ฉันต้องการวางวิดีโอในหน้า HTML5 ที่จะเริ่มเล่นในการโหลดหน้าเว็บและเมื่อเล่นเสร็จแล้วให้วนกลับไปที่จุดเริ่มต้นโดยไม่หยุดพัก วิดีโอที่ควรนอกจากนี้ยังไม่ได้มีการควบคุมใด ๆ ที่เกี่ยวข้องกับมันและทั้งสองจะเข้ากันได้กับทุกเบราว์เซอร์ 'ทันสมัยหรือมีตัวเลือกในการ polyfill ที่

ก่อนหน้านี้ฉันจะทำสิ่งนี้ผ่านFlashและFLVPlaybackแต่ฉันต้องการหลีกเลี่ยงFlashในทรงกลม HTML5 ฉันคิดว่าฉันสามารถใช้ javascript setTimeoutเพื่อสร้างลูปที่ราบรื่นได้ แต่ฉันควรใช้อะไรในการฝังวิดีโอเอง มีบางอย่างที่จะสตรีมวิดีโอในแบบที่FLVPlaybackต้องการหรือไม่?

ห่วงแอตทริบิวต์ควรจะทำมันได้

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

หากคุณมีปัญหากับแอตทริบิวต์การวนซ้ำ (เหมือนที่เราเคยมีในอดีต) ให้ฟังvideoEndเหตุการณ์และเรียกใช้play()เมธอดเมื่อมันเริ่ม

หมายเหตุ 1: ผมไม่แน่ใจว่าเกี่ยวกับพฤติกรรมบน iPad / iPhone แอปเปิ้ลเพราะพวกเขามีข้อ จำกัด autoplayบางอย่างกับ

Note2: loop="true"และ autoplay="autoplay"เลิกใช้แล้ว

เมื่อวันที่เมษายน 2018 Chrome (พร้อมกับเบราว์เซอร์อื่น ๆ ที่สำคัญหลาย ๆ คน) ตอนนี้ต้องmutedแอตทริบิวต์เกินไป

ดังนั้นคุณควรใช้

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

สำหรับ iPhone จะใช้งานได้หากคุณเพิ่ม playinline ด้วยดังนั้น:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

คุณสามารถทำได้สองวิธีต่อไปนี้:

1) การใช้loopแอตทริบิวต์ในองค์ประกอบวิดีโอ (กล่าวถึงในคำตอบแรก):

2) และคุณสามารถใช้งานendedสื่อ:

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});