论坛 › 欢乐水吧 › 用html5视频播放器播mp3测试

亚伦影音工作室 发表于 2025-3-6 18:03

用html5视频播放器播mp3测试

本帖最后由 亚伦影音工作室 于 2025-3-14 18:59 编辑 <br /><br /><div id="papa">

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<div class="video">
<div id="ppm"></div>
<div id="ppcm" ></div>
    <!-- 视频播放区 -->
    <video id="video1" autoplay src="https://img4.oldkids.cn/upload/2025/01/25/blog_260855907_20250125143403551.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: -42%; top: 30%; width:1186px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url('https://img2.oldkids.cn/upload/2020/11/23/photo_20201123133415772.jpg') no-repeat center/cover;position: relative;}
.video {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
}
#ppm{position: absolute; width: 100%; height: 100%; opacity: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;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
.video video {
   
    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 {
   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 {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #FF0000;
    border-radius: 6px;
}



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


#fullscreen { opacity:1;position: relative;
    top: 0px; width: 22px; height: 22px;   cursor: pointer;left:1%;z-index: 40;}
#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;
    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");
var fullScreen = document.getElementById("fullScreen");

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 ? (ppcm.style.opacity= '1',ppm.style.opacity = '0') : (ppcm.style.opacity= '0',ppm.style.opacity = '1');
</script>
<script >
var lrc = `搀扶（DJ 版）
词曲：马健涛
编曲：马健涛
笛子：刘志敏
混音：马健涛
母带：马健涛
出品：星光灿烂
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动
另外一个时空再相守
多年前我牵了你的手
从此后我们风雨同路走
下雨了我为你撑伞
衣服破了你帮我缝上
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
另外一个时空再相守

`;
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-6 21:09

和直接用音频没什么区别呢。
制作漂亮。欣赏言论老师好帖{:4_199:}

小辣椒 发表于 2025-3-6 22:25

亚纶，这个我不是很理解，把代码去电脑预览加了视频好像没有效果

杨帆 发表于 2025-3-6 22:27

本帖最后由 杨帆 于 2025-3-6 22:49 编辑

音、视频播放器！可视频出不来画面呀？亚伦老师辛苦了{:4_191:}

亚伦影音工作室 发表于 2025-3-6 23:38

小辣椒 发表于 2025-3-6 22:25
亚纶，这个我不是很理解，把代码去电脑预览加了视频好像没有效果

这个代码原来是播mp4的，mp3也可以播通用，mp4视频这样也可以加动画或者歌词等不再是单一播放mp4.

亚伦影音工作室 发表于 2025-3-6 23:40

亚伦影音工作室 发表于 2025-3-6 23:38
这个代码原来是播mp4的，mp3也可以播通用，mp4视频这样也可以加动画或者歌词等不再是单一播放mp4.

如果想播mp4只要简单改一下就能播了。

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

亚伦影音工作室 发表于 2025-3-6 23:40
如果想播mp4只要简单改一下就能播了。

谢谢亚伦老师无私分享，祝贺亚伦老师再创新高{:4_176:}

小辣椒 发表于 2025-3-8 12:34

亚伦影音工作室 发表于 2025-3-6 23:40
如果想播mp4只要简单改一下就能播了。

哦，所以现在的代码我换MP4不能出来，要重新修改过，明白了

查看完整版本: 用html5视频播放器播mp3测试