Làm thế nào để phát tệp video mp4 với thẻ video HTML5 trên iOS (iPhone và iPad)?

Question

Tôi muốn hiển thị video HTML5 cho người dùng của mình bằng thẻ video. Đối với Firefox, Chrome và Opera WEBM hoạt động như mong đợi. Trong Safari trên Windows và Mac, phiên bản MP4 của tôi cũng hoạt động. Vấn đề duy nhất tôi gặp phải là, nó sẽ không chơi trên iPad và iPhone (Safari tất nhiên).

Tạo video

Các MP4 (h.264 + acc-lc) được chuyển đổi như thế này (với cấu hình: cơ bản và mức 3.0 cho khả năng tương thích tối đa với iOS):

• Suối # 0: 0 (eng): Video: h264 (Đường cơ sở bị hạn chế), yuv420p, 640x352, 198 kb/s, 17 khung hình/giây, 17 tbr, 17408 tbn, 34 tbc (mặc định)
• Luồng số 0: 1 (eng): Âm thanh: aac (LC) (mp4a/0x6134706D), 48000 Hz, âm thanh nổi, fltp, 56 kb/s (mặc định)

Edit: đầu ra ffprobe Tổng số (thay đổi nhỏ về, vv bitrate để đề cập ở trên):

Metadata: 
major_brand  : isom 
minor_version : 512 
compatible_brands: isomiso2avc1mp41 
encoder   : Lavf56.30.100 
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s 
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default) 
Metadata: 
    handler_name : VideoHandler 
Stream #0:1(eng): Audio: aac (LC) (mp4a/0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default) 
Metadata: 
    handler_name : SoundHandler 

tôi thấy yêu cầu khác nhau cho các thiết bị iOS như this và this, cũng someone được đề cập để thêm định dạng pixel yuv420p khi chuyển đổi.

Trong thực tế, ffmpeg cmd trông như thế này:

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4 

hiển thị hình

Với Modernizr tôi phát hiện mà định dạng được "hỗ trợ" và thêm nó vào src hoặc video thẻ. Điều cuối cùng là thêm loại MIME phù hợp. Đối với mp4 tôi thêm type="video/mp4". Mã đầy đủ cho thẻ video là:

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/> 

tôi đã cố gắng nhiều cách khác nhau: thực hiện riêng với giao diện riêng, điều khiển và thông tin từ các nhà cung cấp trình duyệt và Video.js chỉ để kiểm tra xem tôi đang quá studip cho việc này. Tất cả hoạt động trong môi trường được liệt kê ở trên ngoại trừ iPhone và iPad.

Tôi đã đọc bài viết này trên Video on the web, đặc biệt là this part và chỉ phục vụ tệp "đúng" với loại "đúng" mà không có thuộc tính poster.

My Apache có

AddType video/mp4      mp4 m4v f4v f4p 
AddType video/ogg      ogv 
AddType video/webm      webm 

Và byte-ranges được kích hoạt. Điều này là cần thiết để lấy nội dung một phần từ máy chủ.

Có ai biết đầu mối gì đang xảy ra ở đó không? Cảm ơn trước!

Chỉnh sửa: Safari và Chrome đều ném MEDIA_ERR_SRC_NOT_SUPPORTED Lỗi trên iPad. Có phải là một vấn đề với mã hóa.

Answer 1

tôi thấy lý do tại sao iPad và iPhone sẽ không chơi. Thư mục của tôi bị hạn chế truy cập qua htaccess để bảo vệ ứng dụng beta. Firefox và cứ tiếp tục chuyển tiếp tên người dùng và mật khẩu cho tất cả các yêu cầu, safari trên Mac yêu cầu lại thông tin đăng nhập, nhưng các trình duyệt trên iPad và iPhone thì không. Để nhanh chóng kiểm tra điều này Tôi đã xóa bảo vệ thư mục và nó hoạt động tốt. Cảm ơn tất cả những đóng góp và suy nghĩ về vấn đề của tôi!

Answer 2

Hãy thử chuyển đổi thuộc tính 'controls' - hoặc xác định src khác nhau.

<video src="http://example.com/path/mymovie.mov" 
     controls 
     height=340 width=640 
     poster="http://example.com/path/poster.jpg"> 
    </video> 

Check out this article 'About HTML5 Audio and Video for Safari' (developers guide)

Ngoài ra, một hỗ trợ ổn định tốt đẹp để các thẻ HTML5 <video> cho iPad/iPhone là JW player. (chỉ hoạt động với nó)

jwplayer('video').setup({ 
    flashplayer: '/Scripts/jwplayer/player.swf', 
    file: 'seanpenn.mp4', 
    autostart: false, 
    controlbar: 'over', 
    image: 'spicoli.jpg', 
    width: 295, 
    height: 214, 
    skin: '/Scripts/jwplayer/glow.xml', 
    stretching: 'exactfit' 
});