2012-02-26 3 views
8

mediaelement.js에 대한 플래시 폴백을 사용하고 싶지만 왼쪽 상단에 "다운로드 파일"이라는 검은 색 영역 만 표시됩니다. 내가 생성하는 동영상 마크 업은 이와 매우 비슷하게 보입니다. 난 그냥 개인 정보 보호를 위해 어떤 경로를 수정이와 분명히 뭔가 잘못은mediaelement.js의 플래시가 "다운로드 파일"만 표시합니다.

<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> 

있습니까? 디버그 출력을 얻을 수있는 방법이 있습니까? "다운로드 파일"은 언제 나타나나요? mediaelement.js 페이지는 어디에도 언급하지 않습니다. 먼저 경로 중 하나가 잘못되어야한다고 생각했지만 Chrome의 디버그 도구에서 실패한 요청을 볼 수 없습니다.

도움을 주시면 감사하겠습니다.

편집

: 나는 실패한 코드의 최소한의 예를 추출 당신은 비디오 내부 <source/> 지정하지 않은 것이 here

답변

11

1) 업로드 - 그것은 작동하지 않는 이유가있다. 여러 브라우저에서 작동하려면 여러 개의 <source/>을 지정해야합니다. "옵션 B"(http://mediaelementjs.com/)를 참조하십시오.

"다운로드 파일"링크는 실제로 MediaElement 논리 (mediaelement-and-player.js:1027 참조)에 의해 생성됩니다.

2) 플래시 폴백은 브라우저가 <video> 태그를 지원하지 않는 경우에만 호출됩니다. 브라우저에서 테스트하려면 '< 동영상 >'을 잘못된 태그 (예 : '<voodeo>')로 바꿉니다.

여기에 (일부 경로를 테스트 할 수 있도록 대체) 고정 코드입니다 :

<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

파일 경로가 두 번이어야하는 이유는 무엇입니까? 한 번 소스에서 그리고 한 번 flashvars에서? – ajmurmann

+0

예! 나는 이것도 궁금해했다. 사실, IE는 FF 중 하나를 사용합니다. –

1

ivan_pozdeev가 언급 한 바와 같이, 당신은 당신의 비디오 요소의 SRC 태그를 지정할 필요가 없습니다. 그러나 MediaElement.js가 여러 브라우저에서 작동하려면 여러 소스를 제공 할 필요가 없습니다.

귀하의 경우 플래시 또는 실버 라이트 (예 : ME의 "Fall-Forward"기능)가 설치되어있는 한 단일 .mp4 파일을 제공 할 수 있으며 모든 브라우저 (2 단계 : 옵션 A : http://www.mediaelementjs.com 참조)에서 작동합니다).

HTML5가 사용중인 브라우저에 기본이 아니며 해당 플러그인 (예 : Flash 또는 Silverlight)이 설치되어 있지 않으면 "다운로드 파일"이 표시됩니다. mediaelement-and-player.js에서 162 행을 중단합니다 (var pv = this.plugins [plugin];). "pv"의 값이 "0, 0, 0"이면 MediaElement에서 플러그인을 감지하지 못했고 "파일 다운로드"링크를 받게됩니다.

0

youtube 비디오를 만들고 그것을 보여 주려고한다면, 무슨 일이 일어 났는지 나는 소스 태그에 type = "video/youtube"를 넣는 것을 잊어 버렸습니다. 그냥 'video'를 입력하도록 설정되었습니다.

관련 문제