Mulai video HTML5 pada posisi tertentu saat memuat?

91

Saya membutuhkan video HTML5 untuk memulai pada titik tertentu. Katakanlah pada waktu 50 detik dan seterusnya.

Saya mencoba tetapi tidak berfungsi seperti yang diharapkan. apakah ada sesuatu yang saya lakukan salah?

Ini kodenya:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script>

Saat halaman dimuat, itu baru mulai diputar dari awal. Namun jika saya memanggil ini selama pemutaran seperti setelah beberapa waktu, ini berfungsi dengan baik. Apakah ada yang saya lewatkan?

javascript html5-video

— Johnydep
sumber

2

Browser apa? Sudahkah Anda mencoba menunda panggilan beberapa milidetik? Mungkin perlu waktu lebih lama untuk memuat elemen video sepenuhnya

— Ortiga

130

Anda harus menunggu hingga browser mengetahui durasi video sebelum Anda dapat mencari ke waktu tertentu. Jadi, saya pikir Anda ingin menunggu acara 'dimuatmetadata' seperti ini:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

— Richard M
sumber

2

Ini tidak berfungsi di Safari. Saya mencoba acara loadeddata juga. Ada ide?

— Simon Perepelitsa

Lupakan. Ini adalah masalah dengan format WEBM. MP4 berfungsi dengan baik.

— Simon Perepelitsa

Gunakan acara 'durationchange' dan selalu panggil jeda sebelum membuat perubahan pada pemutaran video

— Jason White

53

Anda dapat menautkan langsung dengan Media Fragments URI , cukup ubah nama file menjadi file.webm # t = 50

Berikut contohnya

Ini sangat keren, Anda bisa melakukan segala macam hal. Tapi saya tidak tahu status dukungan browser saat ini.

— rlovtang.dll
sumber

Dukungan browser bagus. Saya rasa semua browser yang mendukung HTML5 juga mendukung setidaknya fragmen media temporal dasar.

— Jim S.

@michaelhanon, akan lebih mudah untuk menulis polyfill agar IE dapat mencapainya. Deteksi browser, jika tidak didukung, pisahkan URL, temukan parameter kueri, gunakan Javascript untuk mengubah waktu video ... Saya mungkin melakukannya jika saya mendapat kesempatan

— gdgr

apakah ada fragmen untuk mengatur waktu AKHIR?

— DGoiko

Ia bahkan memungkinkan sepersekian detik setelah titik: #t=17.79^ _ ^

— Klesun

51

TANPA MENGGUNAKAN JAVASCRIPT

Cukup tambahkan #t=[(start_time), (end_time)]di akhir URL media Anda. Satu-satunya kemunduran (jika Anda ingin melihatnya seperti itu) adalah Anda harus mengetahui berapa lama video Anda menunjukkan waktu berakhir. Contoh:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Catatan: Tidak didukung di IE

— anita
sumber

digit kedua sepertinya tidak mengakhiri seberapa banyak video yang dimuat untuk memulai ... digit pertama berfungsi. Ada pemikiran?

— Martian2049

ini tidak bekerja dengan baik. browser masih melakukan pramuat sebanyak yang diinginkan, mungkin hanya memulai dan mengakhiri di tempat yang Anda putuskan, tetapi preload tidak berhenti ...

— Martian2049

28

sesuaikan waktu mulai dan akhir video saat menggunakan tag video di html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

di mana kiri koma adalah waktu mulai dalam detik, kanan koma adalah waktu berakhir dalam detik. hilangkan koma dan waktu berakhir untuk mempengaruhi waktu mulai saja.

— BobK
sumber

digit kedua sepertinya tidak mengakhiri seberapa banyak video yang dimuat untuk memulai ... digit pertama berfungsi. Ada pemikiran?

— Martian2049

Saat bekerja dengan browser, selalu lebih baik untuk memeriksa spesifikasi W3C dan caniuse.com untuk melihat seberapa banyak fitur yang didukung. (Tautan jawaban StackOverflow terbaik ke spesifikasi.) Dalam kasus ini, mereka disebut 'Media Fragments', dan spesifikasinya ada di sini. w3.org/TR/media-frags

— Michael Scheper

3

Di Safari Mac untuk sumber HLS, saya perlu menggunakan acara loadeddata alih-alih acara metadata.

— Robert Reinhardt
sumber

Saya pikir metadata yang dimuat seharusnya menjadi peristiwa yang benar, tetapi saya juga mendapatkan seekable.length 0 (hanya di Safari di OSX) kecuali saya mendengarkan dataloaded. Terima kasih

— Statuswoe

1

Mengapa ini tidak disukai? Ini mungkin tidak secara langsung terkait dengan contoh yang diberikan oleh OP, tetapi secara faktual akurat dan relevan dengan subjek umum pertanyaan.

— JayPea

3

Menggunakan #t=10,20fragmen berhasil untuk saya.

— Kamila
sumber

1

Ini hanyalah pengulangan dari dua jawaban dengan suara terbanyak lainnya yang ditulis sekitar 5 tahun sebelumnya.

— Michael Scheper