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的内容的div移动到video.js。

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

这是http://jmeter.apache.org/api/org/apache/jmeter/protocol/http/control/Cookie的链接。

在全屏视频上显示文字

1 个答案: