mediaelement js 클릭 이벤트

Question

저는 Javascript에 익숙하지 않아 mediaelment 플레이어에서 click 이벤트를 얻으려고 힘듭니다. 내 목표는 플레이어 뒤의 모달 상자로 들어 가지 않는 클릭을 차단하는 것입니다. 여기

html로 관련 부분 : 여기

<div class="player_bg" id="mybg" style="display: none" onclick="close_over(this.id)"> 
    <!-- onclick="close_over(this.id)" --> 
    <div class="video-modal" onclick="close_over(this.parentNode.id)"></div> 
    <div class="videoplayer"> 
    <video id="myVideo" width="640" height="360" poster="" controls="controls" preload="auto" onclick="close_over(this.id)"> 
     <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
     <source type="video/mp4" src="">        
     <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
     <source type="video/webm" src=""> 
     <!-- Ogg/Vorbis for older Firefox and Opera versions --> 
     <source type="video/ogg" src=""> 
     <object width="640" height="360" type="application/x-shockwave-flash" data="../_styles/js/flashmediaelement.swf"> 
     <param name="movie" value="flashmediaelement.swf" /> 
     <param name="flashvars" value="controls=true&amp;file="> 
     <img src="" width="320" height="220" title="No video playback capabilities, please download the video" alt="" > 
     </object> 
    </video> 
    </div> 
</div> 

및 내 자바 스크립트입니다 :

function close_over(who) { 
if (who == "myVideo") { 
} else  { 

el = document.getElementById("mybg"); 
el.style.display ="none"; 
//(el.style.display == "block") ? "none" : "block"; 
    $('video, audio').each(function() { 
     $(this)[0].player.pause();   
    }); 

} 

}

(비디오 모달 그냥 버튼을 배경 이미지로 정의된다 , '활성 레이어'는 'mybg'입니다.)

이렇게하면 click 이벤트가 두 번 발생합니다. 먼저 그것을 얻었고 if 절에 의해 막혔습니다 (원하는대로). 그러면 모달 상자 (mybg)로 전달되고 else 절 (내가 원치 않는)에 의해 처리됩니다. 나는 단지이 자바 스크립트 코드했다 출발점으로

:

function close_over(who) { 
el = document.getElementById("mybg"); 
el.style.display ="none"; 
//(el.style.display == "block") ? "none" : "block"; 
    $('video, audio').each(function() { 
     $(this)[0].player.pause();   
    }); 

}

를 (예, '이 예에서는 사용되지 않습니다)

두 스크립트가 잘 반응하는 것은 내가 클릭 컨트롤의 재생/일시 중지 단추에 있지만 비디오를 클릭하여 일시 중지하거나 컨트롤의 타임 라인에 나타나지 않습니다.

아이디어가 있으십니까?

Answer 1

미디어 요소 플레이어를 시작하는 동안 미디어 플레이어 플레이어 클릭 이벤트를 수신 할 수 있습니다. 일단 미디어 요소 플레이어 클릭 이벤트가 발생하면 이벤트 전파가 중지되어 외부 요소로 전파되지 않습니다. 위에서 수행 할 코드 스 니펫은 다음과 같습니다.

$("#myVideo").mediaelementplayer({ 
     // if the <video width> is not specified, this is the default 
     defaultVideoWidth: 480, 
     // if the <video height> is not specified, this is the default 
     defaultVideoHeight: 270, 
     // if set, overrides <video width> 
     videoWidth: -1, 
     // if set, overrides <video height> 
     videoHeight: -1, 
     // width of audio player 
     audioWidth: 30, 
     // height of audio player 
     audioHeight: 400, 
     // initial volume when the player starts 
     startVolume: 0.8, 
     // useful for <audio> player loops 
     loop: false, 
     // enables Flash and Silverlight to resize to content size 
     enableAutosize: false, 
     // the order of controls you want on the control bar (and other plugins below) 

     features: ["playpause", "progress", "current", "duration", "tracks", "volume", "fullscreen"], 
     // Hide controls when playing and mouse is not over the video 
     alwaysShowControls: false, 
     // force iPad's native controls 
     iPadUseNativeControls: false, 
     // force iPhone's native controls 
     iPhoneUseNativeControls: false, 
     // force Android's native controls 
     AndroidUseNativeControls: false, 
     // forces the hour marker (##:00:00) 
     alwaysShowHours: false, 
     // show framecount in timecode (##:00:00:00) 
     showTimecodeFrameCount: false, 
     // used when showTimecodeFrameCount is set to true 
     framesPerSecond: 25, 
     // turns keyboard support on and off for this instance 
     enableKeyboard: true, 
     // when this player starts, it will pause other players 
     pauseOtherPlayers: true, 
     // array of keyboard commands 
     keyActions: [], 
     //autoPlay the video on load; 
     autoPlay: false, 
     //path to get flash player; 
     pluginPath: 'specify your plugin path here', 
     //name of the flash; 
     flashName: "flashmediaelement.swf", 
     // show mode on browser. 
     success: function (player, node) { 

      //Add the custom event here.    
      player.addEventListener("click", function (e) { 

       console.log("clicked ", e); 

       //IE9 & Other Browsers 
       if (e.stopPropagation) { 
         e.stopPropagation(); 
       } 
       //IE8 and Lower 
       else { 
       e.cancelBubble = true; 
       } 
      }); 
     }, 
     error: function (e) { 
      //TODO: fires when a problem is detected 
     } 
    });