Cách truy cập các phương pháp video HTML5 bằng jQuery?

Question

Tôi đang viết một ứng dụng HTML5 và tôi đang cố gắng truy cập các phương thức video gốc (phát, tạm dừng, v.v ...) và sử dụng jQuery. Tôi không muốn sử dụng bất kỳ plugin nào khác.

var movie = $('#video_with_controls'); 

$('#buttonX').click(function() { 
      movie.play(); 
     }); 

Nhưng khi tôi thực thi mã trên đây, tôi nhận được thông báo lỗi giao diện điều khiển sau:

Object has no method 'play' 

Làm thế nào để sửa lỗi này? Cảm ơn.

Answer 1

Phần tử DOM video HTML5 có phương pháp .play(). Không có phương thức phát nào trong jQuery yet. Những gì bạn đang làm sai là kích hoạt phát từ bộ chọn jQuery trả về mảng của các phần tử.

Ví dụ $('#clip') trả về [<video width=​"390" id=​"clip" controls>​…​</video>​] thực sự là một mảng của một phần tử DOM. Để truy cập phần tử DOM thực tế, bạn cần phải giải quyết một trong các phần tử mảng bằng cách thực hiện một cái gì đó như $('#clip')[0]. Bây giờ bạn có thể nói phần tử DOM này với PLAY.

Vì vậy, chỉ làm điều này:

var movie = $('#video_with_controls'); 

$('#buttonX').click(function() { 
      movie[0].play(); //Select a DOM ELEMENT! 
     }); 

Đây là ví dụ của tôi:

HTML:

<video width="390" id="clip" controls=""> 
        <source src="http://slides.html5rocks.com/src/chrome_japan.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">     
        </video> 
     <input type="button" id="play" value="PLAY" /> 

jQuery

$('#play').click(function(){ 
    $('#clip')[0].play() 
}); 

đó làm việc: http://jsbin.com/erekal/3