0

我对 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();        
    });

}

（是的，本例中的“谁”已过时）

当我单击控件中的播放/暂停按钮时，这两个脚本的反应都很好，但如果我单击视频以暂停它或在控件中的时间轴中单击则不会。

有任何想法吗？

4

1 回答 1

0

您可以在启动 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
        }
     });
于 2013-08-06T17:35:35.800 回答