2012-02-26 26 views
8

Tôi muốn nhận dự phòng Flash cho mediaelement.js hoạt động nhưng chỉ hiển thị khu vực màu đen có nội dung là "tệp tải xuống" ở phía trên bên trái. Đánh dấu video tôi tạo trông rất giống như thế này. Tôi vừa sửa đổi một số đường dẫn vì lý do bảo mật:Flash trong mediaelement.js chỉ hiển thị "tệp tải xuống"

<video width="1024" height="576" preload="none" style="display: none; "> 
    <object width="1024" height="576" type="application/x-shockwave-flash" data="flashmediaelement.swf"> 
    <param name="movie" value="/wp-content/themes/my_theme/js/vendor/mediaelement/flashmediaelement.swf"> 
    <param name="flashvars" value="controls=true&amp;file=http://mybucket.s3.amazonaws.com/my_video.mp4"> 
    </object> 
</video> 

Có điều gì rõ ràng sai với điều này không? Có cách nào để có được một số đầu ra gỡ lỗi? Khi nào tệp "tải xuống tệp" hiển thị? Trang mediaelement.js không đề cập đến nó ở bất cứ đâu. Lần đầu tiên tôi nghĩ rằng một trong các đường dẫn phải sai, nhưng tôi không thể thấy bất kỳ yêu cầu nào không thành công trong các công cụ gỡ lỗi của Chrome.

Mọi trợ giúp đều được đánh giá cao!

EDIT: tôi trích ra một ví dụ tối thiểu của mã thất bại và tải nó here

Trả lời

11

1) Bạn không nói rõ <source/> bên trong video - đó là lý do tại sao nó không hoạt động. Bạn cần phải chỉ định nhiều <source/> cho nó hoạt động trong các trình duyệt khác nhau - xem "Tùy chọn B" tại http://mediaelementjs.com/.

Liên kết "Tải xuống tệp" thực sự được tạo bởi logic MediaElement (xem mediaelement-and-player.js:1027).

2) Dự phòng Flash sẽ chỉ được gọi nếu trình duyệt không hỗ trợ thẻ <video>. Để thử nghiệm trong trình duyệt, hãy thay thế "<video>" bằng thẻ không hợp lệ - giả sử "<voodeo>".

Dưới đây là mã cố định (thay thế một số đường dẫn để có thể kiểm tra nó):

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajmurmann.com/flash_test/mediaelement-and-player.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){   
      $('video').mediaelementplayer({ 
      enablePluginDebug: true, 
      plugins: ['flash','silverlight'] 
     }); 
      }); 
     </script> 
    </head> 
    <body> 
     <video width="1024" height="576" controls="controls"> 
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
      <source type="video/mp4" src="http://mediaelementjs.com/media/echo-hereweare.mp4" /> 
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
      <source type="video/webm" src="http://mediaelementjs.com/media/echo-hereweare.webm" /> 
      <!-- Ogg/Vorbis for older Firefox and Opera versions --> 
      <source type="video/ogg" src="http://mediaelementjs.com/media/echo-hereweare.ogv" /> 
      <object width="1024" height="576" type="application/x-shockwave-flash" data="http://ajmurmann.com/flash_test/flashmediaelement.swf"> 
       <param name="movie" value="http://ajmurmann.com/flash_test/flashmediaelement.swf"> 
       <param name="flashvars" value="controls=true&amp;file=http://ajmurmann.com/flash_test/echo-hereweare.mp4"> 
      </object> 
     </video> 
    </body> 
</html> 
+0

Bạn có biết tại sao đường dẫn tệp phải là hai lần không? Khi đã ở trong nguồn và một lần trong flashvars? – ajmurmann

+0

CÓ! Tôi cũng tự hỏi điều này. Thực tế là, IE sử dụng một trong số chúng trong khi FF khác. –

1

Như ivan_pozdeev nói, bạn cần phải xác định một thẻ src trong phần tử video của bạn. Tuy nhiên, bạn không cần phải cung cấp nhiều nguồn cho MediaElement.js để hoạt động trên các trình duyệt khác nhau. Trong trường hợp của bạn, bạn có thể cung cấp một tệp .mp4 duy nhất và nó sẽ hoạt động trên các trình duyệt (xem Bước 2: Tùy chọn A tại http://www.mediaelementjs.com) miễn là bạn đã cài đặt Flash hoặc Silverlight (tức là chức năng "Rơi-Chuyển tiếp" của ME)).

"Tệp tải xuống" sẽ hiển thị khi HTML5 không phải là nguồn gốc của trình duyệt bạn đang sử dụng VÀ bạn chưa cài đặt plugin tương ứng (tức là Flash hoặc Silverlight). Trong mediaelement-and-player.js, ngắt dòng 162 (var pv = this.plugins [plugin];) - nếu "pv" có giá trị là "0, 0, 0", MediaElement chưa phát hiện ra plugin và bạn sẽ nhận được liên kết "Tải xuống tệp".

0

Nếu bạn đang cố gắng làm một video trên youtube và nó hiển thị điều này, những gì đã xảy ra là tôi quên đặt loại = "video/youtube" trong thẻ nguồn. Nó chỉ được đặt thành loại = 'video'

Các vấn đề liên quan