论坛 › 〖互。助〗求助探讨 › 请教亚伦老师：全屏状态下，看不到退出按钮、动图及歌词【已解决】

杨帆 发表于 2025-3-9 20:19

请教亚伦老师：全屏状态下，看不到退出按钮、动图及歌词【已解决】

本帖最后由 杨帆 于 2025-3-15 18:38 编辑 <br /><br /><div id="papa">
<div class="video">
<video id="vid" autoplay src="https://cccimg.com/view.php/477a99e9d4268ee2116f7a39967358b6.mp4" loop muted></video>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<div id="ppm"></div>
<div id="ppcm" ></div>
    <!-- 视频播放区 -->
    <video id="video1" autoplay src="https://cccimg.com/view.php/5aaa43d2afe3daaca27da0ff029493ea.mp3" loop></video>
<!-- 遮罩层 -->
    <div class="cover">
<!-- 居中的播放暂停状态 -->
      <div id="playStatus"></div>
      <!-- 控件部分 -->
      <div class="controls">
            <!-- 控件部分中的播放暂停状态 -->
            <div id="contPlayStatus"></div>
            <div id="currentTime">00:00:00</div>
            <!-- 进度条 -->
            <input id="progressBar" type="range" name="" min="0" max="1000" value="0">
            <div id="duration">00:00:00</div>
            <div id="volume"></div>
            <div id="volumeInput">
                <input id="volumeInputRange" type="range" name="" min="0" max="100" value="100">
            </div>
            <span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
      </div>
    </div>
</div>
</div>
<style>

#papa{left: -43%;margin-top: 12%; width:1286px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url(https://pic1.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg)no-repeat center/100% 100%;border-radius:32px;z-index: 1;}
.video {left: 0%; top: 0%;
   width:100%; height:100%;
    background:url(https://www.helloimg.com/i/2025/02/14/67ae1c2c666fc.gif) no-repeat center/100% 100%;
position:absolute
}
#vid {width: 100%; height: 100%; z-index: 1;
position:absolute;object-fit: cover; mix-blend-mode: screen;
}

#ppm{position: absolute; width: 100%; height: 100%; opacity:1;z-index: 1;
background:url(https://pic1.imgdb.cn/item/67b04254d0e0a243d4ff927c.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
.video video {
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    /* object-fit: contain; */
    object-fit: scale-down;
    object-position: center center;
}

video::-webkit-media-controls {
    /* 去掉全屏时显示的自带控制条 */
    display: none !important;
}

.cover {z-index: 2;
   width: 100%;
    height: 100%;
    background-color: rgba(116, 116, 116, 0.3);
    position: absolute;
    left: 0;
    top: 0;
}

#playStatus {
    width: 44px;
    height: 48px;
    position: absolute;
    top: 50%; opacity:1;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)no-repeat center/100% 100%;;
}

.controls {
   width: 100%;
   
    background-image: linear-gradient(transparent, #50939b);
   position: absolute;
    bottom: 0;display: flex; justify-content: center; align-items:center;
   
}

#contPlayStatus {
    width: 20px;
    height: 26px;
    background: url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)no-repeat center/100% 100%;;
   position: relative;
    top: 0px;left: 0px;
    /* border: 1px solid red; */
}

#currentTime {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 14px;
    color: #fff;
}

#progressBar {
    /* 进度条样式 */
    -webkit-appearance: none;
    width: 72%;
    height: 5px;
    /* border: 0px solid red; */
    position: relative;
    top: 0px;
    background-color: #eee;
    border-radius: 2.5px;
}

#progressBar::-webkit-slider-thumb {
    /* 进度条滑块样式 */
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #ff0000;

    border-radius: 6px;
}

#duration {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 14px;
    color: #fff;
}

#volume {filter:invert(100%);
    width: 30px;
    height: 30px;
    /* border: 1px solid red; */
    position: relative;
    top: 0px;
    background: url(https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png)no-repeat center/100% 100%;;
}

#volumeInput {
    width: 32px;
    height: 120px;
    position: absolute;
    left: 88%;
    top: -105px;
    display: none;
}

#volumeInputRange {
    transform: rotate(270deg);
    -webkit-appearance: none;
    width: 120px;
    height: 5px;
    /* border: 1px solid red; */
    position: absolute;
    left: 0px;
    top: 55px;
    background-color: #eee;
    border-radius: 2.5px;
}

#volumeInputRange::-webkit-slider-thumb {z-index: 3;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #FF0000;
    border-radius: 6px;
}

#volume:hover +#volumeInput { display: block;}



#volumeInput:hover > #volume {display: block; }
#fullscreen { opacity:1;position: relative;z-index: 40;
    top: 0px; width: 22px; height: 22px;   cursor: pointer;left:1%;}
#papa:hover #fullscreen { opacity:1;}

#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }

.lrc{
    width: 100%;
    height: 120px;z-index: 1;
    overflow: hidden;bottom: 0px;
    display: block; position:absolute;
    margin: 0px auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<script>
// 需要获取的元素
var divVideo = document.getElementsByClassName("video");
var divCover = document.getElementsByClassName("cover");
var video1 = document.getElementById("video1");
var playStatus = document.getElementById("playStatus");
var controls = document.getElementsByClassName("controls");
var contPlayStatus = document.getElementById("contPlayStatus");
var currentTime = document.getElementById("currentTime");
var progressBar = document.getElementById("progressBar");
var duration = document.getElementById("duration");
var volume = document.getElementById("volume");


divVideo.addEventListener("mouseenter", function() {
    divCover.style.display = "block";
})

divVideo.addEventListener("mouseleave", function() {
    divCover.style.display = "none";
})

video1.addEventListener("play", function() {
    playStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)";
    contPlayStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2710d0e0a243d4f60f3c.png)"
})

video1.addEventListener("pause", function() {
    playStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)";
    contPlayStatus.style.backgroundImage = "url(https://pic1.imgdb.cn/item/678f2717d0e0a243d4f60f3d.png)";

})

playStatus.addEventListener("click", play_pause);
contPlayStatus.addEventListener("click", play_pause);

setInterval(function() {
    progressBar.value = video1.currentTime / video1.duration * 1000;
    currentTime.innerHTML = getTime(video1.currentTime);
    duration.innerHTML = getTime(video1.duration);
}, 1000)

progressBar.addEventListener("input", function() {
    video1.currentTime = video1.duration * (progressBar.value / 1000);
    video1.play();
})

var currVolume;

volume.addEventListener("click", function() {
    if (video1.volume != 0) {
      currVolume = video1.volume;
      video1.volume = 0;
      volumeInputRange.value = 0;
      this.style.backgroundImage = "url(https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png)";
    } else {
      video1.volume = currVolume;
      volumeInputRange.value = currVolume * 100;
      this.style.backgroundImage = "url(https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png)";
    }
})

video1.volume = 0.6;
volumeInputRange.value = 90;
volumeInputRange.addEventListener("input", function() {
    video1.volume = Number(this.value) / 100;
    volume.style.backgroundImage = video1.volume == 0 ? "url(https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png)" : "url(https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png)";
})
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

function play_pause() {
    if (video1.paused) {
      video1.play();
      audio1.pause();
      check_box.checked = false;
    } else {
      video1.pause();
    }
}

function getTime(time) {
    let hour = Math.floor(time / 3600) < 10 ? "0" + Math.floor(time / 3600) : Math.floor(time / 3600);
    let min = Math.floor(time % 3600 / 60) < 10 ? "0" + Math.floor(time % 3600 / 60) : Math.floor(time % 3600 / 60);
    var sec = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
    return hour + ":" + min + ":" + sec;
}
playStatus.onclick =contPlayStatus.onclick = () => video1.paused ? (vid.pause(),ppcm.style.opacity= '1',ppm.style.opacity = '0') : (vid.play(),ppcm.style.opacity= '0',ppm.style.opacity = '1');
</script>
<script >
var lrc = `

别和自己过不去（Live 合唱版）
演唱：落笔
作词：蒋平
作曲：廖伟鉴
编曲：大耳总
后期：拙啼
合唱：毅然合唱团
混音：孙毅然
制作人：廖伟鉴
出品人：廖伟鉴
发行：华伟文化传媒有限公司
人生总有风和雨
哪能事事皆如意
坎坎坷坷算什么
其实都是小问题
历尽太多悲和喜
日子还是要继续
吞下委屈喂大格局
没有什么了不起
别和过去过不去
因为过去已过去
别和现在过不去
因为还要过下去
别和别人过不去
该是你的是你的
别和自己过不去
该经历的就经历
历尽太多悲和喜
日子还是要继续
吞下委屈喂大格局
没有什么了不起
别和过去过不去
因为过去已过去
别和现在过不去
因为还要过下去
别和别人过不去
该是你的是你的
别和自己过不去
该经历的就经历
别和过去过不去
因为过去已过去
别和现在过不去
因为还要过下去
别和别人过不去
该是你的是你的
别和自己过不去
该经历的就经历
别和自己过不去
开开心心过下去

`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("video1").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("video1").ontimeupdate = setPosition;
</script >

杨帆 发表于 2025-3-9 20:52

本帖最后由 杨帆 于 2025-3-9 21:06 编辑

请教亚伦老师：全屏状态下，看不到退出按钮、动图及歌词呀？ @亚伦影音工作室

红影 发表于 2025-3-9 21:21

好像在好像在视频之上还有个视频？全屏的时候这个浮在表面的视频不见了{:4_204:}

杨帆 发表于 2025-3-9 21:45

红影 发表于 2025-3-9 21:21
好像在好像在视频之上还有个视频？全屏的时候这个浮在表面的视频不见了

是的，视频之上还有个动图，全屏下这个动图、还有全屏按钮及歌词都没了

红影 发表于 2025-3-9 21:55

杨帆 发表于 2025-3-9 21:45
是的，视频之上还有个动图，全屏下这个动图、还有全屏按钮及歌词都没了

原来是动图，怪不得暂停时它还在动。是的全屏时好像都没了。

杨帆 发表于 2025-3-9 22:04

红影 发表于 2025-3-9 21:55
原来是动图，怪不得暂停时它还在动。是的全屏时好像都没了。

呵呵，等亚伦老师有空时驯服它吧

红影 发表于 2025-3-9 22:11

杨帆 发表于 2025-3-9 22:04
呵呵，等亚伦老师有空时驯服它吧

嗯，他应该更清楚{:4_204:}

杨帆 发表于 2025-3-9 22:19

红影 发表于 2025-3-9 22:11
嗯，他应该更清楚

是，模版是亚伦老师原创的

红影 发表于 2025-3-9 22:28

杨帆 发表于 2025-3-9 22:19
是，模版是亚伦老师原创的

希望他能为你解答{:4_204:}

杨帆 发表于 2025-3-9 23:26

红影 发表于 2025-3-9 22:28
希望他能为你解答

没事，这对亚伦老师都是小问题

梦江南 发表于 2025-3-10 08:53

欣赏佳作，没有看到有歌词？

杨帆 发表于 2025-3-10 13:33

梦江南 发表于 2025-3-10 08:53
欣赏佳作，没有看到有歌词？

谢谢江南友友关注，此贴完美呈现还有待完善{:4_204:}

梦江南 发表于 2025-3-10 14:06

杨帆 发表于 2025-3-10 13:33
谢谢江南友友关注，此贴完美呈现还有待完善

现在看到歌词了，还能一键控制。{:4_199:}

亚伦影音工作室 发表于 2025-3-10 14:10

杨帆 发表于 2025-3-9 20:52
请教亚伦老师：全屏状态下，看不到退出按钮、动图及歌词呀？ @亚伦影音工作室

朋友我已经修改你可以用了！

杨帆 发表于 2025-3-10 14:23

亚伦影音工作室 发表于 2025-3-10 14:10
朋友我已经修改你可以用了！

知道了，亚伦老师您辛苦了{:4_191:}

红影 发表于 2025-3-10 18:49

杨帆 发表于 2025-3-9 23:26
没事，这对亚伦老师都是小问题

反正我是看不明白的，也没法给出建议{:4_204:}

杨帆 发表于 2025-3-10 23:02

红影 发表于 2025-3-10 18:49
反正我是看不明白的，也没法给出建议

不明白，才要多看多学习呀{:4_187:}

红影 发表于 2025-3-10 23:15

杨帆 发表于 2025-3-10 23:02
不明白，才要多看多学习呀

是的，我也跟着学习{:4_187:}

查看完整版本: 请教亚伦老师：全屏状态下，看不到退出按钮、动图及歌词【已解决】