mediaelement js點擊事件

Question

我對Javascript很感興趣，並且非常喜歡在mediaelment播放器上獲得點擊事件。我的目標是阻止它無法通過播放器後面的模式框的點擊。

這裏的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> 

，這裏是我的javascript：

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

這給了我兩次點擊事件。首先我得到它，它被if子句阻塞（如我所希望的那樣），然後通過模態框（mybg）並由else子句處理（我不想）。

爲出發點我只有這段JavaScript代碼：

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

您可以在啓動mediaelement播放器時收聽mediaelement播放器的點擊事件。一旦你得到mediaelement player click事件，你就可以停止事件的傳播，所以它不會傳播到外層元素。這是上面的代碼片段。

$("#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 
     } 
    });