HTML5 video yüklerken belirli bir konumda başlatılsın mı?

91

Belirli bir noktada başlamak için HTML5 videoya ihtiyacım var. 50 saniye ileri diyelim.

Denedim ama beklendiği gibi çalışmıyor. yanlış yaptığım bir şey mi var?

İşte kod:

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

Sayfa yüklendiğinde, baştan oynamaya başlar. Ancak bunu bir süre sonra olduğu gibi oynatma sırasında çağırırsam, iyi çalışıyor. Kaçırdığım bir şey var mı?

javascript html5-video

— Johnydep
kaynak

2

Hangi tarayıcılar? Aramayı birkaç milisaniye geciktirmeyi denediniz mi? Belki video öğesinin tamamen yüklenmesi biraz daha uzun

— sürüyor

130

Belirli bir zamanı aramadan önce tarayıcının videonun süresini öğrenmesini beklemelisiniz. Öyleyse, 'yüklenen meta veri' olayını şöyle bir şey beklemek istediğinizi düşünüyorum:

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

— Richard M
kaynak

2

Bu, Safari'de çalışmaz. Loaddata olayını da denedim. Herhangi bir fikir?

— Simon Perepelitsa

Boşver. Bu, WEBM formatıyla ilgili bir sorundur. MP4 iyi çalışıyor.

— Simon Perepelitsa

'Durationchange' olayını kullanın ve video oynatma üzerinde değişiklik yapmadan önce her zaman duraklatmayı çağırın

— Jason White

53

Doğrudan Medya Parçaları URI ile bağlantı kurabilirsiniz , sadece dosya adını file.webm # t = 50 olarak değiştirin

İşte bir örnek

Bu oldukça havalı, her türlü şeyi yapabilirsiniz. Ancak tarayıcı desteğinin mevcut durumunu bilmiyorum.

— Rlovtang
kaynak

Tarayıcı desteği iyidir. Bence tüm HTML5 destekleyen tarayıcılar da en azından temel geçici medya parçalarını destekliyor.

— Jim S.

@michaelhanon, bunu başarmak için IE için bir polyfill yazmak oldukça kolay olurdu. Tarayıcıyı algıla, desteklenmiyorsa, URL'yi

— parçala

BİTİŞ zamanını ayarlamak için bir parça var mı?

— DGoiko

Hatta bir noktadan sonra saniyenin kesirlerine bile izin verir: #t=17.79^ _ ^

— Klesun

51

JAVASCRIPT KULLANMADAN

Sadece #t=[(start_time), (end_time)]medya URL'nizin sonuna ekleyin. Tek aksilik (eğer bu şekilde görmek istiyorsanız) videonuzun bitiş zamanını belirtmek için ne kadar uzun olduğunu bilmenizdir. Misal:

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

Notlar: IE'de desteklenmez

— Anita
kaynak

ikinci rakam videonun ne kadarının yüklendiğini gösteriyor gibi görünüyor ... ilk rakam çalıştı. Düşüncesi olan var mı?

— Martian2049

bu gerçekten iyi çalışmıyor. tarayıcı hala istediği kadar önyükleme yapıyor, belki karar verdiğiniz yerde başlayıp bitiyor, ancak önyükleme durmadı ...

— Martian2049

28

html5'te video etiketini kullanırken video başlangıç ve bitiş zamanını ayarlayın;

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

virgülün sol tarafı saniye cinsinden başlangıç zamanı, virgülün sağ tarafı saniye cinsinden bitiş zamanıdır. yalnızca başlangıç zamanını etkilemek için virgül ve bitiş zamanını bırakın.

— BobK
kaynak

ikinci rakam videonun ne kadarının yüklendiğini gösteriyor gibi görünüyor ... ilk rakam çalıştı. Düşüncesi olan var mı?

— Martian2049

Tarayıcılarla çalışırken, bir özelliğin ne kadar geniş çapta desteklendiğini görmek için W3C spesifikasyonunu ve caniuse.com'u kontrol etmek her zaman daha iyidir. (En iyi StackOverflow cevapları spesifikasyonlara bağlantıdır.) Bu durumda, bunlara 'Medya Parçaları' denir ve spesifikasyon buradadır. w3.org/TR/media-frags

— Michael Scheper

3

Safari Mac'te bir HLS kaynağı için meta veri olayı yerine yüklenen veri olayını kullanmam gerekiyordu.

— Robert Reinhardt
kaynak

Yüklenen verilerin doğru olay olması gerektiğini düşünüyorum, ancak ben de aranabilir hale geliyordum. Uzunluk 0 (yalnızca OSX'teki Safari'de), veri yüklemesini dinlemediğim sürece. Teşekkürler

— Statuswoe

1

Bu neden reddedildi? Muhtemelen OP tarafından sağlanan örnekle doğrudan ilgili değildir, ancak gerçeklere göre doğrudur ve sorunun genel konusuyla ilgilidir.

— JayPea

3

Bir #t=10,20parça kullanmak benim için çalıştı.

— Kamila
kaynak

1

Bu, 5 yıl kadar önce yazılan yüksek oyu alan diğer iki cevabın tekrarıdır.

— Michael Scheper