在全屏视频上显示文字

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');
        }
    });
});

我在这里错过了什么？是视频吗？

这是我的笔link： 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'));

这是 new CodePen 的 link。

在全屏视频上显示文字

Showing text on full Screen Video

html

javascript

css

jquery

video.js