Putar video yang terus berulang saat dimuat dalam HTML5

92

Saya ingin menempatkan video di halaman HTML5 yang akan mulai diputar saat halaman dimuat, dan setelah selesai, putar kembali ke awal tanpa jeda. Video juga TIDAK boleh memiliki kontrol yang terkait dengannya, dan kompatibel dengan semua browser 'modern', atau memiliki opsi polyfill.

Sebelumnya saya akan melakukan ini melalui Flashdan FLVPlayback, tapi saya lebih suka menghindari Flashdalam lingkup HTML5. Saya berpikir saya bisa menggunakan javascript setTimeoutuntuk membuat loop mulus, tapi apa yang harus saya gunakan untuk menyematkan video itu sendiri? Apakah ada sesuatu di luar sana yang akan mengalirkan video seperti FLVPlaybackitu?

html video video-streaming html5-video stefmikhail
sumber

Jawaban:

156

The Loop atribut harus melakukannya:

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

Jika Anda memiliki masalah dengan atribut loop (seperti yang kita alami sebelumnya), dengarkan videoEndkejadian dan panggil play()metode saat diaktifkan.

Note1: Saya tidak yakin tentang perilaku di iPad / iPhone Apple, karena mereka memiliki beberapa batasan autoplay.

Note2: loop="true"dan autoplay="autoplay"tidak digunakan lagi

longi
sumber
1
Benar-benar nasihat yang bagus pak. Saya akhirnya menggunakan javascriptuntuk mendengarkan videoEndacara tersebut, dan mengulang kembali ke awal dari apa yang saya tahu, loopatribut tidak didukung oleh semua browser. Untuk perangkat iOS, mereka tidak mendukung autoplaydalam bentuk apa pun oleh iOS 5, jadi saya hanya menggunakan gambar cadangan untuk seluler. Terima kasih lagi.
stefmikhail
10
menggunakan <video loop = "true"> tidak valid w3.org/TR/html-markup/video.html - baik gunakan <video loop = "loop"> atau hanya <video loop> - aturan ini berlaku untuk hampir SEMUA tag HTML5 (baik hanya tagname, atau tagname = "tagname" untuk XHTML5)
@vaxquis terima kasih atas pembaruannya, Anda dapat mengedit perubahan api lain kali!
longi
5
Tidak masalah, sobat, selalu senang membantu. Namun, saya tidak akan mencampur atribut jenis XHTML 'autoplay = "autoplay"' dengan 'loop' jenis HTML - saya akan menggunakan <video ... autoplay loop>, yang dapat diuraikan sebagai HTML5 atau <video .. . autoplay = "autoplay" loop = "loop">, dapat diuraikan sebagai HTML5 atau XHTML5. gaya pencampuran membuat markup yang masih tidak valid sebagai XHTML tetapi tidak perlu verbose untuk HTML.
1
Umumnya, autoplayhanya berfungsi di Safari jika Anda juga menggunakan muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos
andreyrd
40

Pada April 2018, Chrome (bersama dengan beberapa browser utama lainnya) sekarang memerlukan yang mutedatribut juga.

Karena itu, Anda harus menggunakan

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

Untuk iPhone itu berfungsi jika Anda menambahkan juga playsinline jadi:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
Raluca Albu
sumber
Alat peraga untuk JSX:autoPlay loop muted playsInline
pomber
2

Anda dapat melakukan ini dengan dua cara berikut:

1) Menggunakan loopatribut dalam elemen video (disebutkan di jawaban pertama):

2) dan Anda dapat menggunakan endedacara media:

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

    newVideo.play();

});
asmmahmud
sumber