Наложение текста в полноэкранном видеоплеере - PullRequest
Новая
       11

Наложение текста в полноэкранном видеоплеере

0 голосов
/ 24 апреля 2019

Я хочу наложить или показать текст HTML в моем полноэкранном видеоплеере.он отображается на обычном экране, но когда я нажимаю на весь экран, текст не отображается.

вот то, что выглядит, когда он находится в обычном экране.

СМ.МОЙ НАКЛАДНОЙ ТЕКСТ В НОРМАЛЬНОМ ЭКРАНЕ VID

и когда я ПОЛНЫЙ ЭКРАН it.

КОГДА РЕЖИМ ПОЛНОГО ЭКРАНА ВКЛЮЧЕН *

Как получить видео на полном экране с наложенным текстом.

вот код для видео 

<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();
}
...