Phát video HTML5 trên iPad và tìm kiếm

Question

Lỗi rất lạ Tôi không thể tìm ra.

Tôi đang cố gắng phát video HTML5 từ một vị trí nhất định khi người dùng truy cập phát. Tôi đang cố gắng tìm nó ngay khi video bắt đầu phát.

Trong sự kiện phát của tôi, tôi làm this.currentTime = X

Trên trình duyệt, nó hoạt động tốt. Nhưng trên IPad, khi tôi phát video, video không tìm đúng vị trí (nó bắt đầu từ số không).

Thậm chí kỳ quặc hơn nữa, nếu tôi thực hiện cuộc gọi this.currentTime = X trong setTimeout, giả sử 1 giây, nó hoạt động trên IPad (đôi khi).

Answer 1

Đánh giá cao các nỗ lực cho câu trả lời bên dưới. Thật không may, đã phải nghỉ mát để chỉ kiểm tra bên trong timeupdate nếu thời gian hiện tại là> 0 và < 1, nếu sau đó nó đã đi đến phần đó của video và loại bỏ người nghe để timeupdate.

Answer 2

cố gắng hạn chế của bạn X-1 thập phân

X.toFixed(1); 

Như bạn nói nó hoạt động đôi khi sau một thời gian 1 giây. Bạn đã cố gắng đặt vị trí sau đám cháy sự kiện playing chưa? hoặc thậm chí các canplaythrough kiện

Hãy nhìn vào nguồn gốc của this page để xem danh sách toàn bộ các sự kiện mà có thể được sử dụng (trong file javascript)

Answer 3

Trên iOS, video tải at play time (xem mụC# 2), không phải lúc tải trang. Tôi đoán là video không được tải khi bạn chạy this.currentTime = X, vì vậy video không có hiệu lực. Điều này cũng giải thích lý do tại sao trì hoãn hoạt động đôi khi có thể khắc phục vấn đề: đôi khi nó đã được tải sau một giây, đôi khi không.

Tôi không có một thiết bị iOS để kiểm tra, nhưng tôi khuyên bạn nên ràng buộc một người biết lắng nghe loadeddata vào video để thao tác currentTime bạn chỉ xảy ra sau khi đoạn video bắt đầu tải:

// within the play event handler... 
if(!isIOSDevice) { 
    this.currentTime = X; 
} else { 
    function trackTo(evt) { 
     evt.target.currentTime = X; 
     evt.target.removeEventListener("loadeddata", trackTo) 
    }); 
    this.addEventListener("loadeddata", trackTo); 
} 

Bạn sẽ cần đặt isIOSDevice ở nơi khác trong mã của bạn, dựa trên việc lượt truy cập hiện tại đến từ thiết bị iOS hay không.

Answer 4

Mặc dù câu hỏi này khá cũ nhưng vấn đề vẫn còn mở. Tôi đã phát hiện một giải pháp hoạt động trên nhiều iPad được thử nghiệm (1 + 2 + 3) cho iOS 5 và 6 (iOS3 + 4 chưa được kiểm tra):

Về cơ bản, trước tiên bạn phải đợi sự kiện playing ban đầu, sau đó thêm một sự kiện -giờ thời gian cho canplaythrough và sau đó cho progress - chỉ khi đó bạn mới có thể thực sự thay đổi giá trị currentTime. Mọi cố gắng trước đó sẽ thất bại!

Video phải bắt đầu phát lúc đầu, làm cho lớp màu đen ở phía trên phần tử video thuận tiện. Thật không may, âm thanh trong video không thể bị ngừng hoạt động thông qua JavaScript -> không phải là một UX hoàn hảo

// https://github.com/JoernBerkefeld/iOSvideoSeekOnLoad/MIT License 
// requires jQuery 1.8+ 
// seekToInitially (float) : video-time in seconds 
function loadingSeek(seekToInitially, callback) { 
    if("undefined"==typeof callback) { 
     callback = function() {}; 
    } 
    var video = $("video"), 
     video0 = video[0], 
     isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null, 
     test; 
    if(isiOS) { // get the iOS Version 
     test =navigator.userAgent.match("OS ([0-9]{1})_([0-9]{1})"); 
     // you could add a loading spinner and a black layer onPlay HERE to hide the video as it starts at 0:00 before seeking 
     // don't add it before or ppl will not click on the play button, thinking the player still needs to load 
    } 
    video.one("playing",function() { 
     if(seekToInitially > 0) { 
      //log("seekToInitially: "+seekToInitially); 
      if(isiOS) { 
       // iOS devices fire an error if currentTime is set before the video started playing 
       // this will only set the time on the first timeupdate after canplaythrough... everything else fails 
       video.one("canplaythrough",function() { 
        video.one("progress",function() { 
         video0.currentTime = seekToInitially; 
         video.one("seeked",function() { 
          // hide the loading spinner and the black layer HERE if you added one before 

          // optionally execute a callback function once seeking is done 
          callback(); 
         }); 
        }); 
       }); 
      } else { 
       // seek directly after play was executed for all other devices 
       video0.currentTime = seekToInitially; 

       // optionally execute a callback function once seeking is done 
       callback(); 
      } 
     } else { 
      // seek not necessary 

      // optionally execute a callback function once seeking is done 
      callback(); 
     } 
    }); 
} 

toàn bộ điều có thể được tải về từ my GitHub repo

Answer 5

apsillers là đúng.Khi video bắt đầu phát, trình phát Quicktime sẽ xuất hiện và video sẽ không thể tìm kiếm được cho đến khi sự kiện 'tiến trình' đầu tiên được kích hoạt. Nếu bạn cố gắng tìm kiếm trước đó, bạn sẽ nhận được lỗi trạng thái không hợp lệ. Đây là mã của tôi:

cueVideo = function (video, pos) { 
    try { 
     video.currentTime = pos; 

    // Mobile Safari's quicktime player will error if this doesn't work. 
    } catch(error) { 
     if (error.code === 11) { // Invalid State Error 

      // once 'progress' happens, the video will be seekable. 
      $(video).one('progress', cueVideo.bind(this, video, pos)); 
     } 
    } 
}