0

我正在尝试使用 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 代码时，视频无法正常工作

您知道另一种方法如何在视频播放时关闭广告或在视频暂停时显示广告吗？

4

1 回答 1

0

使用解决

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

moveAdZonesData();
于 2015-11-21T16:18:48.707 回答