Jwplayer Pre Roll ADS 播放视频时无法关闭广告 div
Jwplayer Pre Roll ADS Cant close the ads div when video plays
我正在尝试使用 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'">×</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 代码时,视频无法正常工作
你知道视频播放时关闭广告或视频暂停时显示的另一种方法吗?
使用
解决
jwplayer('jwplayer').onPlay(
function(event) {
$(".hidePauseAdZone").css("display","none");
}
);
jwplayer("jwplayer").onPause(
function(event) {
return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'block';
}
);
moveAdZonesData();
我正在尝试使用 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'">×</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 代码时,视频无法正常工作
你知道视频播放时关闭广告或视频暂停时显示的另一种方法吗?
使用
解决jwplayer('jwplayer').onPlay(
function(event) {
$(".hidePauseAdZone").css("display","none");
}
);
jwplayer("jwplayer").onPause(
function(event) {
return document.getElementsByClassName("hidePauseAdZone")[0].style.display = 'block';
}
);
moveAdZonesData();