Phát video lặp lại vô hạn khi tải trong HTML5

92

Tôi đang tìm cách đặt video vào trang HTML5 sẽ bắt đầu phát khi tải trang và sau khi hoàn tất, hãy quay lại từ đầu mà không cần nghỉ. Video cũng KHÔNG được có bất kỳ điều khiển nào liên quan đến nó và tương thích với tất cả các trình duyệt 'hiện đại' hoặc có tùy chọn polyfill.

Trước đây tôi đã làm điều này thông qua Flashvà FLVPlayback, nhưng tôi muốn tránh xa Flashtrong lĩnh vực HTML5. Tôi đang nghĩ mình có thể sử dụng javascript setTimeoutđể tạo một vòng lặp mượt mà, nhưng tôi nên sử dụng gì để nhúng video? Có thứ gì đó ngoài kia sẽ phát trực tuyến video FLVPlaybackkhông?

— stefmikhail
nguồn

156

Các vòng lặp thuộc tính nên làm điều đó:

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

Nếu bạn gặp sự cố với thuộc tính vòng lặp (như chúng ta đã gặp trong quá khứ), hãy lắng nghe videoEndsự kiện và gọi play()phương thức khi nó kích hoạt.

Lưu ý1: Tôi không chắc về hành vi trên iPad / iPhone của Apple, vì chúng có một số hạn chế autoplay.

Note2: loop="true"và autoplay="autoplay"không được dùng nữa

— longi
nguồn

1

Quả thực là lời khuyên tốt thưa ông. Tôi đã kết thúc việc sử dụng javascriptđể lắng nghe videoEndsự kiện và lặp lại từ đầu như những gì tôi có thể biết, loopthuộc tính này không được tất cả các trình duyệt hỗ trợ. Đối với các thiết bị iOS, chúng không hỗ trợ autoplaytheo bất kỳ hình dạng hoặc hình thức nào bằng iOS 5, vì vậy tôi chỉ sử dụng hình ảnh dự phòng cho thiết bị di động. Cảm ơn một lần nữa.

— stefmikhail

10

sử dụng <video loop = "true"> không hợp lệ w3.org/TR/html-markup/video.html - sử dụng <video loop = "loop"> hoặc chỉ <video loop> - quy tắc này phù hợp với hầu hết TẤT CẢ các thẻ HTML5 (chỉ cần tagname hoặc tagname = "tagname" cho XHTML5)

@vaxquis cảm ơn bạn đã cập nhật, bạn có thể chỉnh sửa các thay đổi api vào lần sau!

— longi

5

Không sao đâu, anh bạn, luôn sẵn lòng giúp đỡ. Tuy nhiên, tôi sẽ không kết hợp các thuộc tính kiểu XHTML 'autoplay = "autoplay"' với 'vòng lặp' kiểu HTML - Tôi sẽ sử dụng <video ... autoplay loop>, có thể phân tích cú pháp dưới dạng HTML5 hoặc <video .. . autoplay = "autoplay" loop = "loop">, có thể phân tích cú pháp dưới dạng HTML5 hoặc XHTML5. việc trộn các kiểu tạo ra một đánh dấu vẫn không hợp lệ như XHTML nhưng không cần thiết cho HTML.

1

Nói chung, autoplaychỉ hoạt động trong Safari nếu bạn cũng sử dụng muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

38

Tính đến tháng 4 năm 2018, Chrome (cùng với một số trình duyệt lớn khác) bây giờ yêu cầu các mutedthuộc tính quá.

Do đó, bạn nên sử dụng

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

— micah5
nguồn

14

Đối với iPhone, nó hoạt động nếu bạn thêm cũng playinline như vậy:

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

— Raluca Albu
nguồn

Đạo cụ cho JSX:autoPlay loop muted playsInline

— pomber

2

Bạn có thể thực hiện việc này theo hai cách sau:

1) Sử dụng loopthuộc tính trong phần tử video (được đề cập trong câu trả lời đầu tiên):

2) và bạn có thể sử dụng endedsự kiện truyền thông:

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

    newVideo.play();

});

— asmmahmud
nguồn