Android 4.0.4의 Flexbox Modal에서 MediaElement 플레이어의 컨트롤을 볼 수 없습니다.

Question

Fancybox Modal에서 만든 미디어 요소 플레이어에 문제가 있습니다. 이는 4.0.4를 실행하는 Android 기기에만 해당됩니다.

모든 Android 기기, 새로운 Android OS, Chrome, Firefox 및 IE에서 Flexbox 모달 내에서 새 MediaElement 플레이어를 만들면 컨트롤을보고 상호 작용할 수 있습니다.

그러나 4.0.4에서 만들면 컨트롤이 숨겨집니다. 그러나 컨트롤이 숨겨져 있지만 컨트롤이 숨겨져 있습니다. 그러나 비디오 자체를 클릭 할 수 없기 때문에 재생이 어려워집니다. 그리고 숨겨진 컨트롤은 분명히 문제입니다.

mediaelementjs_settings = { 

        loop : mej_loop, 
        pluginPath : options.plugin_path, 
        iPadUseNativeControls: options.mobile_native_controls, 
        iPhoneUseNativeControls: options.mobile_native_controls, 
        AndroidUseNativeControls: false, 
        alwaysShowControls: false, 
        error  : function (mediaElement, domObject) { 
         $('<p class="' + options.component_type + '_error_message">' + options.error_msg + '</p>').insertAfter($(mediaElement).parent().parent().parent()); 
         options.component_el.trigger(component_error, options); 
        }, 
        success  : function(mediaElement, domObject) { 
         var meEl = mediaElement; 
         options.component_el.trigger(component_initialized, options); 
         if(mej_auto_start) { 
          // autostart requires a short timeout to work on several video formats. 100ms 
          // is hardly noticeable so we do it for everything for consistency 
          window.setTimeout(function() { 
           mediaElement.play(); 
          }, 100); 
         } 
        }, 
        pauseOtherPlayers: false 
       }; 


new MediaElementPlayer($(this).find('video:first'), mediaelementjs_settings); 

저는 Z- 색인 및 기타 CSS 수정 프로그램을 사용했지만 현재 난처한 상태입니다. 어떤 아이디어.

Answer 1

Fancybox의 오버레이가 어떻게 든 컨트롤을 모호하게하는 문제라고 판단했습니다. 해결책은 오버레이의 위치를 ​​고정 대신 절대로 설정하는 것이 었습니다. 이것은 Fancybox가 작동하는 방식에 영향을 줄 수 있으므로 비디오를 삽입하는 스크립트가 적절한 스타일을 적용하는 클래스를 추가하고 제거합니다.