Jwplayer Pre Roll ADS Cant close the ads div when video plays

Question

Im trying to make a closable advertisement div using jwplayer 7

my codes are below:

<?php 
$video = get_post_meta($post->ID,'videourl', true);
$embedvideo =  get_post_meta($post->ID,'embedvideo', true);
$embed_video = get_post_meta($post->ID, 'embed_code', true);
$web2player = get_post_meta($post->ID,'secondplayer', true);
$sefurL = get_bloginfo('template_url', true);
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$logoimage = stripslashes(get_option('alb_jwlogo')); 
$logolink = stripslashes(get_option('alb_jwlink')); 
$skin = stripslashes(get_option('alb_jwskin')); 
$position = stripslashes(get_option('alb_move_logo'));
if(get_option('alb_jwkey')){$key = get_option('alb_jwkey');}else{$key = '7lTPCF2LvWYLPfF2COF0CAmrW8vMnodJ4P7OEg';}
$autostart = get_option('alb_videostart');if ($autostart == "on") { $autostart = 'true'; } elseif ($autostart == "off") { $autostart = 'false'; } else { $autostart = 'false'; }
if(get_option('alb_ratio')){$ratio = get_option('alb_ratio');}else{$ratio = '4:3';}
if($video != "") {  ?>
<?php if ( !wp_is_mobile() ) { ?>
<script type="text/javascript">jwplayer.key="<?php echo $key; ?>";</script>
<div id="player">

<div style="position: relative; width: 100%; height: 100%;">
<div id='jwplayer' style="width: 100%; height: 100%;"></div>
<div class="hidePauseAdZone" style="position: absolute;top: 20%;left: 50%;margin-left: -150px;text-align: center;background: rgb(190, 190, 190);background: rgba(190, 190, 190);border: 1px solid #000;">
<span style="padding: 5px;display: block;text-align: left; color: #ccc;background: #000;font-size: 12px">
<?php _e('ADVERTISEMENT', 'bestia'); ?>
<a href="#close" style="color: #fff; float:right; text-decoration: none" onclick="jw.play();">
<i style="margin-left: .3em; font-size: 17px; font-weight: bold"onmouseover="this.style.color='#FA80A5'"onmouseout="this.style.color='#FFF'">&times;</i>
</a>
</span>
<div style="width: 300px; height: 250px; display: table-cell; vertical-align: middle;">
<img src="/ads/300red.jpg" alt="Example ADS">
<div id="playerPause"></div>
</div>
</div>
</div>
<div style="display: none" class="adZonesHolder" data-id="playerPause">
<noindex><div class="pr-widget" data-h="200" data-res="true" data-w="300" id="pr-cw60"></div></noindex>
</div>
<script type="text/javascript">

var jw = null;

    function moveAdZonesData(){
        var adzones = document.getElementsByClassName("adZonesHolder");
        for (var i=0; i < adzones.length; i++) {
            var id = adzones[i].dataset.id;
            if (null != id) {
                document.getElementById(id).innerHTML = adzones[i].innerHTML;
                document.getElementById(id).style.display == 'block';
            } else {
                return false;
            }
        }
        return false;
    };


var jw = jwplayer("jwplayer").setup({
   file: '<?php echo $video; ?>',
    image:"<?php echo $thumb; ?>",
    width: "100%",
    height: "100%",
    aspectratio: "<?php echo $ratio; ?>",
    startparam: "start",
    autostart: <?php echo $autostart; ?>,
    primary: 'html5',
    logo: {
        file: '<?php echo $logoimage; ?>',
        link: '<?php echo $logolink; ?>',
        position: "right-bottom",
    },
   skin : {
    url:"<?php echo $sefurL; ?>/inc/tools/jwplayer/skins/<?php echo $skin; ?>.css",
    name:"<?php echo $skin; ?>"
    },  
    related: {
      file: "<?php bloginfo('url'); ?>/<?php $category = get_the_category($post->ID); echo $category[0]->category_nicename; ?>/?feed=related-feed"
   }    
   }); 


jw.onPause(function(){
  //var win = window.open('<?php echo $video; ?>', '_blank');
  //win.focus();
  return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'block';
  });
  jw.onPlay(function(){
  return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'none';
});
moveAdZonesData();  

</script>
</div>
<?php } else {
echo '<video src="'.$video.'" poster="'.$thumb.'" controls>
      Your browser does not support the <code>video</code> element.
     </video>';
} 
?>
<?php } elseif($video == "" && $embedvideo != "") { echo $embedvideo;  
} elseif ($embed_video != "") { 
echo '<div id="player">';
include (TEMPLATEPATH . '/inc/tools/inplayer300x250.php');
echo $embed_video;
echo '</div>';  
} elseif ($web2player != "") { 
echo '<div id="player">';
echo do_shortcode('[l2pl]'.$web2player.'[/l2pl]');
echo '</div>';  
} else {
get_template_part( 'inc/layout/default/embed', get_post_format() );
} ?>

as you see Im using some javascript codes

jw.onPause(function(){
  //var win = window.open('<?php echo $video; ?>', '_blank');
  //win.focus();
  return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'block';
  });
  jw.onPlay(function(){
  return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'none';
});
moveAdZonesData();

I cannot understand what Im doing wrong because the codes seems to be working but when I add these javascript codes the video is not working more

Do you know another method how to close the advertisement when video plays or displaying when the video is paused?

Answer 1

resolved using

jwplayer('jwplayer').onPlay(
        function(event) {
  $(".hidePauseAdZone").css("display","none");
        }
    );
    jwplayer("jwplayer").onPause(
        function(event) {
return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'block';
        }
    );        

moveAdZonesData();