2011-08-04 45 views
34

Tôi có một video mp4 mà tôi muốn phát trong IE9 bằng cách sử dụng thẻ HTML5 <video>. Tôi đã thêm kiểu MIME vào IIS 7 vì vậy nếu tôi duyệt http://localhost/video.mp4, nó sẽ phát trong cả Chrome và IE9 nhưng không có trong HTML5, Chrome sẽ phát video đó trong HTML. Đây là mã:HTML5 - mp4 video không phát trong IE9

<html> 
<body> 
    <video src="video.mp4" width="400" height="300" preload controls> 
    </video> 
</body> 
</html> 

Bất kỳ ý tưởng nào?

Cảm ơn

UPDATE:

Cố gắng cùng một tập tin trong Firefox 5.0 và nó đã không làm việc một trong hai, chỉ có Chrome có khả năng phát video mp4.

+0

này làm việc sau khi hết thất bại: http://stackoverflow.com/questions/16732419/mp4-from-php-not-playing-in-html5 -video-tag –

Trả lời

18

Đã kết thúc bằng cách sử dụng http://videojs.com/ để hỗ trợ tất cả các trình duyệt.

Tuy nhiên, để có được những video làm việc trong IE9 và Chrome Tôi chỉ cần thêm loại doc html5 và đã qua sử dụng mp4:

<!DOCTYPE html> 
<html> 
<body> 
    <video src="video.mp4" width="400" height="300" preload controls> 
    </video> 
</body> 
</html> 
+1

Mã này sẽ không hoạt động trong Firefox, bạn cũng sẽ cần một phiên bản webm. Và có cả hai phiên bản sẽ cản trở tiếng vang trong ipad và iphones. Sẽ phải sử dụng jquery và phục vụ nguồn theo trình duyệt. – Jeremy

0

Hãy thử những điều sau đây và xem nếu nó hoạt động:

<video width="400" height="300" preload controls> 
    <source src="video.mp4" type="video/mp4" /> 
    Your browser does not support the video tag. 
</video> 
+0

Tôi nhận được 'Trình duyệt của bạn không hỗ trợ thẻ video'. –

3

Từ những gì tôi đã nghe, hỗ trợ video cũng rất ít.

Từ http://diveintohtml5.ep.io/video.html#what-works:

Theo văn bản này, đây là cảnh quan của HTML5 video:

  • Mozilla Firefox (3.5 và mới hơn) hỗ trợ Theora video và Vorbis âm thanh trong một container Ogg . Firefox 4 cũng hỗ trợ WebM.

  • Opera (10.5 trở lên) hỗ trợ video Theora và âm thanh Vorbis trong vùng chứa Ogg. Opera 10.60 cũng hỗ trợ WebM.

  • Google Chrome (3.0 trở lên) hỗ trợ video Theora và âm thanh Vorbis trong vùng chứa Ogg. Google Chrome 6.0 cũng hỗ trợ WebM.

  • Safari trên máy Mac và máy tính Windows (3.0 trở lên) sẽ hỗ trợ mọi thứ mà QuickTime hỗ trợ. Về lý thuyết, bạn có thể yêu cầu người dùng cài đặt các plugin QuickTime của bên thứ ba. Trong thực tế, rất ít người dùng sẽ làm điều đó. Vì vậy, bạn còn lại với các định dạng mà QuickTime hỗ trợ "ra khỏi hộp." Đây là một danh sách dài, nhưng nó không bao gồm WebM, Theora, Vorbis, hoặc Ogg container. Tuy nhiên, QuickTime không gửi kèm hỗ trợ cho video H.264 (cấu hình chính) và âm thanh AAC trong vùng chứa MP4.

  • Điện thoại di động như iPhone của Apple và điện thoại Google Android hỗ trợ video H.264 (hồ sơ cơ sở) và âm thanh AAC (cấu hình “độ phức tạp thấp”) trong vùng chứa MP4.

  • Adobe Flash (9.0.60.184 trở lên) hỗ trợ video H.264 (tất cả cấu hình) và âm thanh AAC (tất cả cấu hình) trong vùng chứa MP4.

  • Internet Explorer 9 hỗ trợ tất cả cấu hình của video H.264 và âm thanh AAC hoặc MP3 trong vùng chứa MP4. Nó cũng sẽ phát video WebM nếu bạn cài đặt codec của bên thứ ba, không được cài đặt theo mặc định trên bất kỳ phiên bản Windows nào. IE9 không hỗ trợ các codec của bên thứ ba khác (không giống như Safari, sẽ phát bất cứ thứ gì QuickTime có thể phát).

  • Internet Explorer 8 hoàn toàn không hỗ trợ video HTML5, nhưng hầu như tất cả người dùng Internet Explorer đều có plugin Adobe Flash. Trong phần sau của chương này, tôi sẽ cho bạn thấy cách bạn có thể sử dụng video HTML5 nhưng lại quay lại Flash một cách duyên dáng.

Đồng thời, bạn nên lưu ý phần này ngay dưới trên cùng một trang:

Không có sự kết hợp duy nhất của container và codec mà làm việc trong tất cả các trình duyệt HTML5.

Điều này không có khả năng thay đổi trong tương lai gần.

Để làm cho video của bạn có thể xem trên tất cả các thiết bị và nền tảng này, bạn sẽ cần phải mã hóa video của mình nhiều lần.

+1

Cảm ơn. Đây là một thử nghiệm đơn giản trước khi tôi bắt đầu làm việc trên trang web thực sự, thật không may điều đó có nghĩa là dành nhiều thời gian mã hóa tất cả các video nhưng tôi đoán sẽ phải đối phó với nó. –

17

Nếu nó vẫn không làm việc ở đây là những gì chắc chắn có thể là một giải pháp: mã hóa mp4 với định dạng nén H.264. Nếu bạn mã hóa nó với định dạng mpeg4 hoặc divx hoặc người nào khác nó sẽ không hoạt động trên IE9 và cũng có thể làm hỏng Google Chrome. Để làm điều đó, tôi sử dụng phần mềm miễn phí Any Video Converter. Nhưng nó có thể được thực hiện với bất kỳ công cụ video tốt ra khỏi đó.

Tôi đã thử tất cả các giải pháp được liệt kê ở đây và đã thử cách giải quyết khác trong nhiều ngày nhưng vấn đề nằm trong cách tôi tạo tệp mp4 của mình. IE9 không giải mã các định dạng khác H.264.

Hope this helps, Jimmy

+0

Đã hiệu quả. Cảm ơn rất nhiều. –

+0

Điều này làm việc cho tôi ngoại trừ tôi đã sử dụng ffmpeg để chuyển đổi nó trên Mac. – JoeMoe1984

8

Dan có một trong những câu trả lời tốt nhất lên ở đó và tôi muốn đề nghị bạn sử dụng html5test.com trên các trình duyệt mục tiêu của bạn để xem các định dạng video được hỗ trợ.

Như đã nêu ở trên, không có định dạng duy nhất nào hoạt động và những gì tôi sử dụng được mã hóa MP4 thành H.264, WebM và dự phòng flash. của let này tôi chỉ cho video trên như sau:

Win 7 - IE9, Chrome, Firefox, Safari, Opera

Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera

MacBook OS X - Chrome, Firefox, Safari, Opera

iPad 2, iPad 3

Linux - Android 2.3, Android 3

<video width="980" height="540" controls> 
     <source src="images/placeholdername.mp4" type="video/mp4" /> 
     <source src="images/placeholdername.webm" type="video/webm" /> 
     <embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed> <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->  
    </video> 

Lưu ý: Video .mp4 phải được mã hóa trong cấu hình cơ bản h264 để video phát trên tất cả các thiết bị di động.

Cập nhật: thêm autoplay = "false" vào dự phòng Flash. Điều này ngăn không cho MP4 bắt đầu phát ngay khi trang tải trên IE8, nó sẽ bắt đầu phát khi nút phát được đẩy.

39

cho IE9 tôi thấy rằng một thẻ meta được yêu cầu để thiết lập chế độ

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 

<video width="400" height="300" preload controls> 
<source src="movie.mp4" type="video/mp4" /> 
Your browser does not support the video tag 
</video> 
+6

Đồng thời thêm chrome: Navigatron

+0

+1 bạn đã giải quyết được vấn đề của tôi, đây phải là câu trả lời – meda

+2

@Navigatron để làm rõ đó là dành cho Google _ChromeFrame_, một plugin bị gián đoạn cho các phiên bản cũ của IE, _not_ Google Chrome. – lacy

3

Tôi có một hồ sơ gốc.mp4 video phát trên một máy chủ, và không phát trên một máy chủ khác.

Sự khác biệt duy nhất là:
một đưa ra một tiêu đề "Content-Length: ..."
khác "Trasfer-Encoding: chunked".

tôi phát hiện ra rằng Content-Length là không cần thiết, nó chỉ là quan trọng, rằng có nên NO chunked tiêu đề. Điều này có thể được thực hiện bằng cách tắt nén (deflate hoặc gzip) cho các tệp .mp4. Làm thế nào điều này có thể được thực hiện là một vấn đề và chủ đề khác: How to disable Apache gzip compression for some media files in .htaccess file?

Có thể có một vấn đề máy chủ:
nó có để cung cấp cho "Content-Type: video/mp4"
và KHÔNG "Content-Type: text/plain"

6

Hỗ trợ Internet Explorer 9 MPEG4 sử dụng codec H.264. Nhưng nó cũng yêu cầu tập tin có thể bắt đầu phát ngay sau khi nó bắt đầu tải xuống.

Dưới đây là các bước cơ bản về cách tạo tệp MPEG hoạt động trong IE9 (sử dụng avconv trên Ubuntu). Tôi đã dành nhiều giờ để tìm ra điều đó, vì vậy tôi hy vọng rằng nó có thể giúp đỡ người khác.

  1. Chuyển video sang MPEG4 bằng codec H.264. Bạn không cần bất cứ điều gì lạ mắt, chỉ cần cho avconv làm công việc cho bạn:

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4 
    
  2. Video này sẽ hoạt động trên tất cả các trình duyệt hỗ trợ MPEG4, trừ IE9. Để thêm hỗ trợ cho IE9, bạn phải di chuyển thông tin tệp đến tiêu đề tệp, do đó trình duyệt có thể bắt đầu phát tệp ngay khi bắt đầu tải xuống. Đây là chìa khóa cho IE9 !!!

    qt-faststart pre_out.mp4 out.mp4 
    

qt-faststart là một tiện ích Quicktime mà còn hỗ trợ/định dạng file ACC H.264. Nó là một phần của gói libav-tools.

1

Nếu một trong những câu trả lời ở trên không làm việc, và bạn đang ở trên một máy chủ apache, thêm dòng sau vào tập tin .htaccess của bạn:

//most of the common formats, add any that apply 
AddType video/mp4 .mp4 
AddType audio/mp4 .m4a 
AddType video/mp4 .m4v 
AddType video/ogg .ogv 
AddType video/ogg .ogg 
AddType video/webm .webm 

Tôi đã có một vấn đề tương tự và thêm các này giải quyết tất cả vấn đề phát lại của tôi.

1

sử dụng cả hai định dạng nó hoạt động tốt trong tất cả các trình duyệt:

<video width="640" height="360" controls> 
    <!-- MP4 must be first for iPad! --> 
    <source src="unbelievable.mp4" type="video/mp4" /><!-- Safari/iOS video --> 
    <source src="movie.ogg" type="video/ogg" /><!-- Firefox/Opera/Chrome10 --> 
</video> 
0

Whithout JavaScript, cách duy nhất tôi có thể chơi mà không có lỗi:

<!--[if lte IE 9]> 
<!-- PUT HERE A FLASH PLAYER WITH video.flv --> 
<![endif]--> 

<!--[if gt IE 9]><!--> 
<video controls class="video"> 
    <source src="video.mp4" type="video/mp4"> 
    <!-- REPEAT FLASH PLAYER CODE HERE --> 
</video> 
<!--<![endif]--> 
1

Internet Explorer và Edge không hỗ trợ một số định dạng MP4 mà Chrome làm. Bạn có thể sử dụng ffprobe để xem định dạng MP4 chính xác.Trong trường hợp của tôi, tôi có hai video này:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4': 
    Metadata: 
    major_brand  : isom 
    minor_version : 512 
    compatible_brands: isomiso2avc1mp41 
    encoder   : Lavf56.40.101 
    Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s 
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1/0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default) 
    Metadata: 
     handler_name : VideoHandler 


Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4': 
    Metadata: 
    major_brand  : isom 
    minor_version : 512 
    compatible_brands: isomiso2avc1mp41 
    encoder   : Lavf57.66.102 
    Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s 
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1/0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default) 
    Metadata: 
     handler_name : VideoHandler 

Cả hai đều phát trong Chrome, nhưng lần đầu tiên không hoạt động trong IE và Edge. Vấn đề là IE và Edge không hỗ trợ yuv444. Bạn có thể chuyển đổi sang một colourspace shittier như thế này:

ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4 
Các vấn đề liên quan