Chọn đối tượng video HTML5 với jQuery

Question

Tôi gặp sự cố khi tải thẻ video HTML5 bằng jQuery. Đây là mã của tôi:

HTML code:

<video id="vid" height="400" width="550"> 
<source src="movie.mp4" type="video/mp4"> 
<source src="movie.ogv" type="video/ogg"> 
</video> 

javascript mã:

function playVid(){ 
    console.log($('#vid')); 
    console.log($('#vid')[0]); 
    $('#vid')[0].currentTime=5; 
    $('#vid')[0].play() 
} 

$(document).ready(){ 
    playVid(); 
} 

Các phá vỡ mã trên dòng .currentTime với các lỗi sau:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable 

Đây là bit mà tôi không thể tìm ra - số console.log đầu tiên hiển thị đối tượng Tôi mong chờ, bên trong đối tượng này là một đối tượng khác được gọi là 0 và điều này chứa tất cả các thuộc tính và phương pháp video HTML5 mà bạn mong đợi, bao gồm .currentTime.

Tuy nhiên ngay sau khi tôi ghi nhật ký thứ hai của $('#vid')[0] nó sẽ hiển thị mã HTML cho thẻ video và không hiển thị đối tượng sau khi được gọi là 0. Tôi nhận được kết quả chính xác tương tự cho console.log($('#vid')["0"]) và console.log($('#vid').get(0)).

Có cách nào nhận được đối tượng được gọi là 0 trong đối tượng được trả về bởi $('#vid') hoạt động trong jQuery không?

Answer 1

Tôi nghĩ bạn đang cố tương tác với yếu tố video trước khi nó sẵn sàng.

Hãy thử một cái gì đó như thế này:

function loadStart(event) 
{ 
    video.currentTime = 1.0; 
} 

function init() 
{ 
    video.addEventListener('loadedmetadata', loadStart, false); 
} 
document.addEventListener("DOMContentLoaded", init, false); 

Nguồn: HTML5 Video - Chrome - Error settings currentTime

Answer 2

function playVid(){ 
    $('#vid').get(0).currentTime=5; 
    $('#vid').get(0).play() 
} 

$(window).load(function(){ 
    playVid(); 
}); 

Here là một ví dụ jsfiddle.

Answer 3

Tôi gặp vấn đề tương tự (với âm thanh). Tôi không tin rằng câu trả lời được chấp nhận giải quyết hoặc giải thích vấn đề ở tất cả, chủ yếu là bởi vì nó không phải là một giải pháp jquery.

Điều kỳ lạ là tôi có thể nhận được thuộc tính currentTime và thậm chí tôi có thể đảm bảo rằng âm thanh đã phát trước khi thử đặt currentTime và lỗi tương tự xảy ra, vì vậy tôi không tin điều này làm với các phương tiện truyền thông được 'sẵn sàng'.

var a = $("#myaudio").get(0); // a html5 audio element 
console.log(a)    // dumps the object reference in the console 
console.log(a.currentTime); // works fine, logs correct value 
a.currentTime = 100   // fails with an InvalidStateError 

Một cách giải quyết là sử dụng một setTimeout

setTimeout(function(){ 
      a.currentTime = 0; 
     },1); 

... nhưng tôi muốn hiểu lý do tại sao nó là không!

Answer 4

var a_video = $('#video_id'); 

a_video.on('loadeddata', function() { 
    if(a_video.readyState != 0) { 
    a_video[0].currentTime = 100; 
    } else { 
    a_video.on('loadedmetadata', function() { 
     a_video[0].currentTime = 100; 
    }); 
    } 
}); 

Answer 5

Bạn cũng có thể sử dụng một try - catch để tránh vấn đề này:

$(document).ready(function() { 

    var $video = $('#vid'), 
     video = $video[0]; 

    function playVid() { 
     video.currentTime = 5; 
     video.play(); 
    } 

    try { 
     playVid(); 
    } catch(error) { 
     $video.on('loadedmetadata', playVid); 
     video.load(); 
    } 

}); 

Answer 6

Tôi đã có một vấn đề tương tự nhưng không thể sử dụng lắng nghe sự kiện bởi vì tôi làm việc với mã thời gian và bấm chức năng để thiết lập hiện tại thời gian. Nhưng tôi cũng tìm thấy một giải pháp làm việc.Bất cứ khi nào tôi bấm vào một nút (mỗi nút duy nhất có một biến thời gian khác nhau) đây là mã trong chức năng nhấp chuột:

$("#movie").get(0).play(); 
setTimeout(function() { 
    $("#movie").get(0).currentTime = my_time_variable; 
}, 500); 

Vì vậy, với chờ 0,5 giây trước khi bắn các chức năng InvalidStateError sẽ không xảy ra nữa. Có lẽ đó là một giải pháp nhanh chóng và bẩn nhưng nó hoạt động;)

Answer 7

Tôi đã có cùng một vấn đề với âm thanh. Đó là một thảm họa :). Bạn phải phát âm thanh trước khi có thể đặt currentTime. Tôi không tìm thấy cách nào khác xung quanh nó. Dưới đây là một chủ đề tốt để tham khảo: https://github.com/johndyer/mediaelement/issues/243

Phát phần tử, sau đó đặt trình xử lý sự kiện cho sự kiện 'đang phát' sẽ đặt thời gian hiện tại. Tôi đã phải ngăn chặn một vòng lặp vô hạn, vì vậy tôi thiết lập một 'loadPlayed' bên ngoài phương pháp. Nó có thể không được thanh lịch, nhưng nó là những gì làm việc vì vậy tôi giữ nó.

audioplayer.src = source; 
audioplayer.play(); 
audioplayer.addEventListener('playing', function() { 
    if (loadPlayed == false) 
    { 
     audioplayer.currentTime = Time; 
     audioplayer.play(); 
     loadPlayed = true; 
    } 
    else { 
     audioplayer.removeEventListener('playing', this); 
    } 
});