我将VideoJs播放器用于我的项目。我有用于预加载的广告,但不为“跳过广告”按钮延迟几分钟,当我单击它时,该按钮不显示。我尝试了播放器的功能,但是什么也没发生,我试图用jquery捕获单击按钮,但没有捕获单击。我哪里错了?
<video style="width: 100%; height: 550px;" id="videobigmain" poster="<?=\backend\models\Page::getMainPoster(68)?>" class="video video-js vjs-default-skin" controls data-setup="{}" >
<source src="<?=\backend\models\Page::getVideo(68,1)?>" type="video/mp4">
//this is not work
<div class="videojs-ads-info enabled">
<span>Your video will resume in 23 seconds</span>
<a class="enabled">Skip Ad</a>
</div>
</video>
和脚本:
videojs('#videobigmain', {}, function () {
var player = this;
//custom button for share the video
var VjsButton = videojs.getComponent("Button");
var customButton = videojs.extend(VjsButton, {
constructor: function(player, options){
VjsButton.call(this, player, options);
this.controlText("Get Code Iframe");
},
handleClick: function() {
$(".popup, .popup-content").addClass("active settings-popup");
},
buildCSSClass: function() {
return "vjs-icon-custombutton vjs-control vjs-button";
}
});
videojs.registerComponent("customButton", customButton); player.getChild("controlBar").addChild("customButton", {});
<?php if(\backend\models\Page::hasAds(68,1) == true){ ?>
player.ads();
player.skipAds({
delayInSeconds: 10
});
player.on('contentchanged', function () {
player.trigger('adsready');
});
player.on('readyforpreroll', function () {
player.ads.startLinearAdMode();
player.src("<?=\backend\models\Page::getAds(68,1)?>");
player.one('adplaying', function () {
player.trigger('ads-ad-started');
});
player.one('adended', function () {
player.ads.endLinearAdMode();
$(".videojs-ads-info").css("display", "none");
});
});
<?php } ?>
player.trigger('adsready');
});
$( "#close-p" ).on( "click", function() {
$(".popup, .popup-content").removeClass("active settings-popup"); });
$( ".videojs-ads-info" ).on( "click", function() {
$(".videojs-ads-info").css("display", "none");
});
$( ".videojs-ads-info > a" ).on( "click", function() {
$(".videojs-ads-info").css("display", "none");
});