2013-09-04 69 views
29

Tôi có trang web này:
http://healthpad.net/dashboard/
Nó có 10 <video> yếu tố trên đó.Tại sao Safari trên iOS không hiển thị áp phích video HTML5 của tôi?

Vì một số lý do, khi tôi tải trang trên iPad, nó không hiển thị áp phích video.

Hãy thử như sau:

  1. tải trang trên trình duyệt máy tính để bàn
  2. tải nó trên một chiếc iPad hoặc iPad mô phỏng, và bạn nhận được một hộp đen lớn với một nút play

image

hãy cho tôi biết lý do điều này xảy ra?

Dưới đây là những gì tôi đã loại trừ khả năng:

ảnh Content-Type tiêu đề.
Tôi đã xác thực rằng tiêu đề loại nội dung hình ảnh được đặt chính xác. Trong ví dụ trên, tiêu đề Content-Type đúng cách image/jpeg.

nhiễu với thư viện Video.js
VideoJs được sử dụng để chứng minh rằng nút play thoải mái trên các trình duyệt máy tính để bàn và để tùy chỉnh các điều khiển. Thư viện này không can thiệp vào trình phát gốc.
Để đảm bảo, tôi đã tạo một trang video thử nghiệm không có lớp video-js, do đó thư viện không nhận và xử lý video đó. Trong thực tế, trang kiểm tra thậm chí không bao gồm bất kỳ thư viện JS, nó chỉ là

<html><body> 
    <video 
     controls 
     height="400" 
     width="600" 
     poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg" 
     src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4" 
    ></video> 
</body></html> 

http://healthpad.net/rj_templates/test/zzz/

Cách sử dụng của bất kỳ thuộc tính video mà có thể không được hỗ trợ trên Mobile Safari
Trang thử nghiệm trên chỉ có một thẻ video đơn giản. Tôi đã thử xóa mọi thuộc tính khác ngoại trừ srcposter, nó không giúp ích gì.

Hầu hết các câu hỏi StackOverflow về chủ đề này chỉ nói "Khởi động lại iPad của bạn"

Dưới đây là nơi nó được kỳ lạ:

Nếu bạn google xung quanh về vấn đề này, các câu trả lời trên StackOverflow có được chấp nhận thường nói "Khởi động lại iPad của bạn, điều đó đã làm cho tôi".

Vì vậy, tôi đã thử làm điều tương tự, lúc đầu tôi chỉ nói rằng nó không hoạt động trong trường hợp của tôi.

Sau đó, tôi đã cố gắng này:
(tất cả các nội dung sau vào mô phỏng iPad)

  1. Tới trang web, áp phích phim không hiển thị
  2. Tới trang kiểm tra (http://healthpad.net/rj_templates/test/zzz/) , áp phích video không hiển thị.
  3. Nhấp vào trang chủ để thoát khỏi Safari (hoặc phím tắt Cmd + Shift + H cho trình giả lập)
  4. Nhấp đúp vào nút trang chủ để chuyển công việc bên ngoài Safari, chạm và giữ biểu tượng safari cho đến khi nút giết hiển thị .
  5. Giết Safari
  6. Mở safari (khởi động lại). Tại thời điểm này, nếu bạn tải trang thử nghiệm (trang chỉ có một video), áp phích sẽ hiển thị.
  7. Bây giờ, hãy truy cập trang nhiều video: (http://healthpad.net/dashboard/). Áp phích video không hiển thị.
  8. Quay lại trang thử nghiệm một video, áp phích video cho quảng cáo đó không còn hoạt động nữa.
  9. Lặp lại các bước từ 3 đến 8 để xem quy trình khi áp phích video ngừng hoạt động.

Vì vậy, rõ ràng, tại một số điểm, Mobile Safari quyết định sẽ không còn hiển thị bất kỳ áp phích video nào. Ngoài ra, rõ ràng, trang web của tôi kích hoạt tình trạng này.

Làm rõ:

Khi áp phích không còn làm việc, nó không chỉ xảy ra trên một miền, không có áp phích video sẽ được nạp cho bất kỳ trang web nào khác, bất kể có hay không nó trên một tên miền hoàn toàn khác nhau (ví dụ: video giới thiệu từ http://www.videojs.com/).

Để đặt lại hành vi này, từ những gì tôi đã thấy, bạn phải giết và khởi động lại Safari. Chỉ cần đóng và mở lại nó sẽ không thiết lập lại trạng thái này.

Có ai biết tại sao điều này xảy ra không? Có cách nào để giải quyết nó không?

+0

Vì vậy, bạn cũng thấy vấn đề với thẻ video đơn giản hoặc chỉ khi sử dụng video.js? Ngoài ra phiên bản nào của video.js và phiên bản iOS nào? – heff

+0

Xảy ra với thẻ video đồng bằng, ngay cả khi videoj không hiển thị. – Prody

Trả lời

2

Tôi thấy câu hỏi liên tục được tăng lên một lần trong một thời gian, mặc dù không có câu trả lời. Vì vậy, đây là những gì tôi đã làm:

Trên iOS, thay vì hiển thị trình phát video (ngay cả với autoload=false), tôi sẽ chỉ hiển thị áp phích và nút phát, hai thẻ độc lập <img>. Khi họ được nhấp, tôi tạo trình phát video từ javascript và yêu cầu nó phát. Hoạt động tốt, người dùng không thấy nhiều sự khác biệt.

+0

bạn vui lòng đăng cách bạn tạo video này trên flyh và làm thế nào để bạn xử lý nó sau khi người dùng dừng/đóng video? –

+0

Giống như câu trả lời cho biết, thẻ ' 'có sự kiện nhấp tạo trình phát video. Video không có tùy chọn đóng video, khi người dùng tương tác với nó, đó là sự tương tác với trình phát Safari gốc trong trường hợp iOS. – Prody

+0

Yea nhưng Khi người dùng đóng video, nó sẽ ở đó trong trang hay cái gì? –

12

Tôi đã làm việc này bằng cách sử dụng PNG thay vì JPG.

Điều lạ lùng là JPG hoạt động trong iOS Safari cục bộ (thông qua máy chủ POW trên wifi cục bộ) nhưng khi được đẩy để dàn dựng hình ảnh áp phích không tải. Cả mã cục bộ và dàn dựng đều tham chiếu cùng một tệp trên S3.

Đã thay đổi định dạng tệp thành PNG và nó tải tốt.

+1

đánh dấu câu trả lời này là đúng, bạn phải sử dụng png – patrick

+0

Tôi đã giải quyết vấn đề này theo cách tương tự. Cảm ơn – Ryan

+0

giống như lỗi trong Safari – TheCrazyProfessor

0

Trong cài đặt Safari [iOS7] Chặn cửa sổ bật lên đã tắt "TẮT" dường như để khắc phục điều này cho tôi, hy vọng điều này sẽ hữu ích.