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播放器点击事件，你就可以停止事件的传播，使它不会传播到外部元素。以下是上面的代码片段。

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

mediaelement js点击事件

1 个答案: