Pertanyaan Secara dinamis menggunakan frame pertama sebagai poster dalam video HTML5?


Saya bertanya-tanya apakah ada cara langsung untuk mencapai efek ini, tanpa perlu kode backend untuk mengekstrak bingkai, simpan sebagai jpg dan basis data di suatu tempat.

Sebuah efek dimana bingkai pertama dari video hanya muncul sebagai poster ketika beban video akan sangat membantu (itu hanya akan berfungsi jika browser dapat memutar kembali video dengan jelas, yang mungkin sedikit berbeda dari bagaimana poster secara tradisional bekerja, tetapi itu bukan masalah.


32
2017-09-06 16:19


asal


Jawaban:


Ada sebuah Popcorn.js plugin yang disebut Popcorn.capture yang akan memungkinkan Anda membuat poster dari kerangka apa pun dari video HTML5 Anda.

Ada batasan yang diberlakukan oleh browser yang melarang membaca data piksel dari sumber daya yang diminta di seluruh domain (menggunakan API kanvas untuk mencatat nilai saat ini dari bingkai). Video sumber harus di-hosting di domain yang sama dengan halaman skrip dan html yang meminta agar pendekatan ini berfungsi.

Kode untuk membuat poster menggunakan plugin ini cukup sederhana:

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});

19
2017-09-06 16:34



Saya baru-baru ini melakukan ini untuk proyek baru yang berfungsi di desktop dan seluler. Triknya membuatnya bekerja di iPhone.

Pengaturan preload=metadata berfungsi di perangkat desktop dan Android, tetapi tidak untuk iPhone.

Untuk iPhone saya harus mengaturnya autoplay jadi gambar poster secara otomatis muncul pada pemuatan awal. iPhone akan mencegah video diputar secara otomatis, tetapi gambar poster muncul sebagai hasilnya.

Saya harus melakukan pemeriksaan untuk iPhone menggunakan jawaban Pavan yang ditemukan di sini. Deteksi Peramban iPhone. Kemudian gunakan tag video yang tepat dengan atau tanpa autoplay tergantung pada perangkat.

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;

$videoTag = "";
if(isIphone()) {
    $videoTag = '<video controls autoplay preload="metadata">';
} else {
    $videoTag = '<video controls preload="metadata">';
}

9
2017-08-30 15:36



Anda dapat mengatur preload='auto' pada elemen video untuk memuat bingkai pertama dari video secara otomatis.


6
2017-08-23 14:33



Apakah Anda mencoba yang berikut ini?

tambahkan saja waktu dalam hitungan detik # t = {seconds} ke URL sumber:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

Saya telah memilih pecahan detik (0,1) untuk menjaga jumlah frame kecil, karena saya memiliki tersangka jika Anda meletakkannya 1 kedua, itu akan "preload" yang pertama 1 detik video (mis. 24 frame atau lebih ....). Untuk berjaga-jaga ...

Bekerja dengan baik di Chrome dan Firefox di desktop :)
Bekerja tidak di ponsel Android, meskipun :(
Saya tidak menguji pada iOS, iPhone, IE belum ??


5
2018-05-17 07:53