0

私はJavascriptにかなり慣れておらず、メディアプレーヤーでクリックイベントを取得するのに苦労しています。私の目的は、プレーヤーの後ろにあるモーダルボックスに到達しないクリックをブロックすることです。

ここに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」です）

これにより、クリックイベントが2回発生します。最初にそれを取得し、それは（私が望んでいたように）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();        
    });

}

（はい、この例では「who」は廃止されています）

コントロールの再生/一時停止ボタンをクリックすると、両方のスクリプトが正常に反応しますが、ビデオをクリックして一時停止したり、コントロールのタイムラインをクリックしたりしても反応しません。

何か案は？

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 に答える