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 
     } 
    });