Question

我想在全屏视频播放器中覆盖或显示html文本。它确实会在正常屏幕上显示，但是当我单击全屏时，文本不会显示。

这是正常屏幕时的样子。

SEE MY OVERLAY TEXT IN NORMAL VID SCREEN

，当我全屏时。

如何在全屏视频中显示叠加文字。

这是视频代码

<div class="container" id='container'>
    <div style="position: relative;">
        <h1 style="background-color: #ddd; position: absolute; z-index:10; display: block;">OVERLAY TEXT HERE IN FULL SCREEN</h1>
    </div>
    <video controls crossorigin playsinline id="player">
    <!-- <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> -->
        <!-- Video files -->
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">

        <!-- Caption files -->
        <track kind="captions" label="English" srclang="en" src="assets/vtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
            default>

        <!-- Fallback for browsers that don't support the <video> element -->
        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
    </video>
</div>

在Javascript部分。

function fullScreen(){
  var container = document.getElementById("container");
  container.requestFullscreen();
}

在全屏视频播放器中覆盖文字

0 个答案: