フルスクリーンビデオでテキストを表示

Question

実際のビデオを再生する前に広告ビデオを再生するvideojsライブラリを使用して小さなコードを書きました。私は広告のビデオに表示されるはずのdivタグが欲しかった。唯一の問題は、ビデオが全画面表示されてもラベルが表示されない場合です。

ここに私のhtmlコード

<div class="videoContainer"> 
    <video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''> 
     <!-- ad source ad ad video url --> 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' /> 
    </video> 
    <!-- text to be displayed while playing ad --> 
    <div class="advertisement hide">Advertisement</div> 
</div> 

CSSコードです：

.videoContainer { 
    max-width: 300px; 
    position: relative; 
    margin: 20px auto 0; 
} 
.advertisement{ 
    position:absolute; 
    color: rgb(230, 200, 98); 
    padding: 5px 10px; 
    text-align: right; 
    background: rgba(0, 0, 0, 0.4); 
    bottom: 50px; 
    right:0; 
    font-size: 14px; 
    font-weight: 700; 
    z-index: 1 !important; 
} 
.hide{ 
    display:none; 
} 

とJavaScriptコードは次のとおりです。

$(document).ready(function(){ 
    var videotag = $('.playads'); 
    var myPlayer = videojs('video_1'); 
    // show advertisement label while play advertisement 
    myPlayer.on('play', function() { 
     if(myPlayer.hasClass("playads")){ 
      $('.advertisement').removeClass('hide'); 
     } 
    }); 
    // Stop from seeking while playing advertisement 
    myPlayer.on("seeking", function(event) { 
     if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) { 
      myPlayer.currentTime(currentTime); 
     } 
    }); 
    myPlayer.on("seeked", function(event) { 
     if (currentTime < myPlayer.currentTime() && myPlayer.hasClass("playads")) { 
      myPlayer.currentTime(currentTime); 
     } 
    }); 
    setInterval(function() { 
     if (!myPlayer.paused() && myPlayer.hasClass("playads")) { 
      currentTime = myPlayer.currentTime(); 
     } 
    }, 1000); 

    // Hide Advertisement label and change data-src of player to play actual video 
    myPlayer.on('ended', function() { 
     if(this.hasClass("playads")){ 
      this.src({type: videotag.attr('mimetype'), src: videotag.attr('video-url')}); 
      this.play(); 
      this.removeClass('playads'); 
      $('.advertisement').addClass('hide'); 
     } 
    }); 
}); 

私はここで何をしないのですか？それはvideojsですか？ここで

は私のペンへのリンクです： https://codepen.io/isheikhspear/pen/RjMOgw?editors=0010

Answer 1

これはにVideo.jsのラッパーの内側にあなたの引数を移動することによって達成することができます。だからあなたの新しいHTMLは次のようになります。

<div class="videoContainer"> 
<!-- Add some extra attribute as video-url and mimetype which we can later play once we are done playing ads --> 
    <video id="video_1" class="video-js playads" height="200px" width="300px" video-url="http://vjs.zencdn.net/v/oceans.mp4" mimetype="video/mp4" controls controlsList="nodownload" preload="none" data-setup=''> 
<!-- ad source ad ad video url --> 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4' /> 
</video> 
<!-- text to be displayed while playing ad --> 
    <div class="moveToVideoJs"> 
    <div class="advertisement hide">Advertisement</div> 
    </div> 
</div> 

あなたにVideo.jsを初期化した後、あなたは、私たちがにVideo.jsににVideo.jsに移動したいものが含まれているあなたのdivを移動する必要があります。

$(".moveToVideoJs") 
    .appendTo($('#video_1')); 

ここにはnew CodePenへのリンクがあります。