各位好我有一个网页要播放影片因为有产权，会希望在影片上面加图层显示目前的会员资讯

我的影片是有用hls去载入m3u8的影片档案在影片上面加入文字的图层透过z-index使之显示在影片的上方如此一来，文字可以显示的出来

但透过video的control去点选全萤幕时图层的文字讯息就消失了(不知是什么原理)想请教一下各位高手们是否有什么辨法可以在全萤幕时也可以有图层文字，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HLS Video Full-Screen with Text Overlay</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}

.video-container {
position: relative;
width: 100%;
height: 100vh;
}

video {
width: 100%;
height: 100%;
object-fit: cover;
}

.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2em;
text-align: center;
z-index: 10; /* Ensures overlay is above the video */
pointer-events: none; /* Allows clicking through the overlay */
}

/* Full-screen button styling */
.fullscreen-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
cursor: pointer;
z-index: 20;
}

/* Positioning of text in full-screen mode */
.fullscreen .overlay {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>

<div class="video-container">
<video id="myVideo" controls>
<source src="your-hls-video.m3u8" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>
<div class="overlay" id="overlay">
<p>这是显示在影片上的文字</p>
</div>
<button class="fullscreen-btn" id="fullscreenBtn">全萤幕</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.getElementById(\'myVideo\');
const overlay = document.getElementById(\'overlay\');
const fullscreenBtn = document.getElementById(\'fullscreenBtn\');

// Initialize HLS.js and load HLS stream if supported
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(\'video/myvideo.m3u8\'); // HLS video source URL
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
console.log(\'HLS.js is ready\');
});
} else if (video.canPlayType(\'application/vnd.apple.mpegurl\')) {
// Native HLS support in some browsers (like Safari)
video.src = \'your-hls-video.m3u8\';
}

// Full-screen toggle functionality
fullscreenBtn.addEventListener(\'click\', function () {
if (!document.fullscreenElement) {
video.requestFullscreen();
} else {
document.exitFullscreen();
}
});

// Handle full-screen change event
document.addEventListener(\'fullscreenchange\', function () {
if (document.fullscreenElement) {
document.body.classList.add(\'fullscreen\');
} else {
document.body.classList.remove(\'fullscreen\');
}
});
</script>

</body>
</html>

1 个回答

0

froce

iT邦大师 1 级 ‧ 2024-12-20 22:25:28

最佳解答

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="wrapper">
  <a>element I want to be visible in full screen mode</a>
  <video width="100%" src="http://sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/big_bunny.webm" controls></video><br/>
</div>
<button onclick="fullscreen()">test</button>
</body>
</html>

<script>
 function fullscreen(){
   const wrapper = document.getElementById(\'wrapper\')
wrapper.requestFullscreen()
 }
</script>
<style>
  a{
    color: red;
  }
 </style>

现在看到确定有用的解法都是用个container，把要显示的和影片包住，对container去做fullscreen。
设定 position或是z-index好像都失效了。

範例要用下面的test的button开fullscreen，用影片上面的一样是触发video的不是wrapper的。