html影片全螢幕播放圖層問題

html hls videoplayer fullscreen layout

breakgod 2024-12-20 15:58:43 ‧ 255 瀏覽

分享至

各位好
我有一個網頁要播放影片
因為有產權，會希望在影片上面加圖層顯示目前的會員資訊

我的影片是有用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>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

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的。