Dừng video HTML5 trênĐóng

Question

Tôi đang sử dụng các công cụ jQuery cho lớp phủ. Bên trong lớp phủ, tôi có một video HTML5. Tuy nhiên, khi tôi đóng lớp phủ, video vẫn tiếp tục phát. Bất kỳ ý tưởng làm thế nào tôi có thể nhận được video dừng lại khi tôi đóng lớp phủ? Dưới đây là đoạn code tôi có:

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }}); 

tôi đã cố gắng sử dụng

$('video').pause(); 

Nhưng điều này dừng lại lớp phủ là tốt.

Answer 1

Vấn đề có thể với selector jquery bạn đã chọn $("video") không phải là một chọn

Bộ chọn đúng có thể được đặt một yếu tố id cho Video tag tức
Hãy nói rằng vẻ bề ngoài yếu tố video của bạn như thế này:

<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video> 

Sau đó, bạn có thể chọn nó qua $("#vid1") với băm dấu (#), bộ chọn id trong jquery. Nếu phần tử video được hiển thị trong hàm, thì bạn có quyền truy cập vào HtmlVideoElement (HtmlMediaElement) .Các yếu tố này có quyền kiểm soát yếu tố video, trong trường hợp của bạn, bạn có thể sử dụng phương thức pause() cho phần tử video của mình.

Kiểm tra tham chiếu cho VideoElement here.
Đồng thời kiểm tra xem có tham chiếu dự phòng here hay không.

Answer 2

Trải nghiệm của tôi với Firefox là việc thêm thuộc tính 'id' vào yếu tố video khiến Firefox gặp sự cố hoàn toàn ... như yêu cầu bạn gửi báo cáo lỗi. Loại bỏ các yếu tố id và nó hoạt động tốt. Tôi không chắc chắn nếu điều này là đúng cho tất cả mọi người, nhưng tôi nghĩ rằng tôi muốn chia sẻ kinh nghiệm của tôi trong trường hợp nó giúp.

Answer 3

Để tiết kiệm thời gian viết mã, hãy sử dụng plugin jquery đã được tối ưu hóa cho iframe video được nhúng.

Tôi đã dành một vài ngày cố gắng tích hợp API moogaloop của Vimeo với các công cụ jquery không thành công. Xem this list để biết một số tùy chọn dễ dàng hơn.

Answer 4

Các công trình sau đây cho tôi:

$('video')[0].pause(); 

Answer 5

Hãy thử điều này:

if ($.browser.msie) 
{ 
    // Some other solution as applies to whatever IE compatible video player used. 
} 
else 
{ 
    $('video')[0].pause(); 
} 

Nhưng, hãy xem xét rằng $ .browser bị phản đối, nhưng tôi đã không tìm thấy một giải pháp có thể so sánh.

Answer 6

Nếu bạn muốn dừng lại tất cả các thẻ phim trong trang của bạn từ chơi, đoạn này ít jQuery sẽ giúp bạn:

$("video").each(function() { this.pause() }); 

Answer 7

Đối với một JQM + PhoneGap app sau đây làm việc cho tôi.

Sau đây là số tiền tối thiểu tôi phải thực hiện để làm việc này. Tôi đã thực sự trải qua một gian hàng do việc đệm trong khi sinh ra yêu cầu ajax khi người dùng nhấn nút quay lại.Tạm dừng video trong Chrome và trình duyệt Android đã lưu video đó vào bộ đệm. Yêu cầu ajax không đồng bộ sẽ gặp khó khăn khi chờ đợi quá trình đệm kết thúc, điều mà nó sẽ không bao giờ xảy ra.

Ràng buộc điều này với sự kiện beforepagehide đã khắc phục sự cố đó.

$("#SOME_JQM_PAGE").live("pagebeforehide", function(event) 
{ 
      $("video").each(function() 
      { 
       logger.debug("PAUSE VIDEO"); 
       this.pause(); 
       this.src = ""; 
      }); 
}); 

Thao tác này sẽ xóa mọi thẻ video trên trang.

Phần quan trọng là this.src = "";

Answer 8

Bắt đầu từ video với các trình duyệt khác nhau

Đối với Opera 12

window.navigator.getUserMedia(param, function(stream) { 
          video.src =window.URL.createObjectURL(stream); 
         }, videoError); 

Đối với Firefox hàng đêm 18,0

window.navigator.mozGetUserMedia(param, function(stream) { 
          video.mozSrcObject = stream; 
         }, videoError); 

Đối với Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) { 
          video.src =window.webkitURL.createObjectURL(stream); 
         }, videoError); 

Dừng video với các trình duyệt khác nhau

Đối với Opera 12

video.pause(); 
video.src=null; 

Đối với Firefox hàng đêm 18,0

video.pause(); 
video.mozSrcObject=null; 

Đối với Chrome 22

video.pause(); 
video.src=""; 

Answer 9

Có người đã có câu trả lời.

$ ('video') sẽ trả về một mảng các mục video. Nó hoàn toàn là một seletor hợp lệ!

nên

$("video").each(function() { this.pause() }); 

sẽ làm việc.