Question

我试图使用jwplayer 7制作一个可关闭的广告div

我的代码如下：

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

如你所见，我正在使用一些javascript代码

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();

我无法理解我做错了什么，因为代码似乎有效，但是当我添加这些javascript代码时，视频效果不佳

您知道在视频播放或视频暂停时如何关闭广告的其他方法吗？

Answer 1

使用

解决

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

moveAdZonesData();

Jwplayer Pre Roll ADS Cant在视频播放时关闭广告div

1 个答案: