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

Jawaban:

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