1

mediaelement.js を使用してオーディオ ファイルを再生しています。私がやろうとしているのは、最初のボタンのクリックを追跡してGoogleアナリティクスに送信し、要素クラスを置き換えて2番目のクリックがGAに送信されないようにすることです。コードは次のとおりです。

$(function () {
    $(".aud-not-played .mejs-play").click(function () {
        $('.aud-not-played').attr('class', 'aud-played');
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
    })
});

そしてHTMLコード：

<div class="aud-not-played">
  <div id="mep_0" class="mejs-container svg  mejs-audio " style="width: 600px; height: 30px;">
    <div class="mejs-inner">
      <div class="mejs-mediaelement">
        <audio src="http://users.skynet.be/fa046054/home/P22/track06.mp3" style="display: none;">

        </audio>
      </div>
      <div class="mejs-layers">
        <div class="mejs-poster mejs-layer" style="display: none; width: 600px; height: 30px;">
        </div>
      </div>
      <div class="mejs-controls">
        <div class="mejs-button mejs-playpause-button mejs-play">
          <button type="button" aria-controls="mep_0" title="Play/Pause">
          </button>
        </div>
      </div>
      <div class="mejs-clear">
      </div>
    </div>
  </div>
</div>

再生ボタンをクリックすると、何らかの理由でコードが実行されません。何が原因か分かりますか？ありがとう

UPD: GA コードを単純な alert('Works!') に置き換えて、動作しているかどうかを確認しました。

$(function () {
    $(".aud-not-played .mejs-play").click(function () {
        alert('Works!');
        $('.aud-not-played').attr('class', 'aud-played');
    })
});
4

4 に答える 4

1

私は非常によく似た問題を抱えていましたが、次の機能とともにプラグインを使用することが唯一の解決策であることがわかりました。これは、ページの準備ができていない状態で、ページ全体の読み込み時に実行する必要があることに注意してください。

プラグイン: http://weblog.west-wind.com/posts/2014/Oct/20/A-jquerywatch-Plugin-for-watching-CSS-styles-and-Attributes

$(window).load(function() {
    // Monitor play buttons
    $(".mejs-playpause-button").watch({
        properties: "top,left,opacity,attr_class",
        // Callback function when a change is detected
        callback: function(data, i) {
            if($(this).hasClass('mejs-pause')) {
                setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
            }
        }
    });
});
于 2014-12-05T23:49:42.407 に答える
0 
$(document).on('click', '.aud-not-played .mejs-play', function () {

    if(!$(this).data('isClicked')) //if it the first click
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);

    $(this).data({ isClicked: true }); //store the click check in jquerys cache
})
于 2013-01-15T11:05:50.410 に答える
0

jqueryのライブ機能を利用。

$(function () {
    $(".aud-not-played .mejs-play").live('click',function () {
        $('.aud-not-played').attr('class', 'aud-played');
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
     })
});
于 2013-01-15T11:07:35.037 に答える
0

たぶん、行に沿ってプログラムでイベントリスナーを追加する必要があります...

$('.mejs-playpause-button button[title="Play/Pause"]').on('click', function(e) {
//Do Whatever you want here        
console.log('addEventListener - playing') ;
});
于 2014-01-30T19:49:32.840 に答える