论坛 › 动画音画 › 画面和播放器分离

亚伦影音工作室 发表于 2024-3-20 14:56

画面和播放器分离

本帖最后由 亚伦影音工作室 于 2024-4-8 19:08 编辑 <br /><br /><style type="text/css">
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:10px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover,linear-gradient(0deg, #000000, #000f00, #000080, #880f00);
        overflow: hidden;
}

.photo {width: 1164px; height: 640px;
position: absolute;
top:0%; left:0%;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round{
0% {
opacity: 1;clip-path: ellipse(0% 00% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)
}

2% {
opacity: 1;clip-path:ellipse(1% 1% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)
}
6% {
opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}

8% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 1;}

12% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 1;}
14% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 0;}
}
.photo:nth-child(15) {animation-delay: 56s;background: url('https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg')no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 52s;background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 44s;background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 40s;background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 32s;background: url(https://pic.imgdb.cn/item/65db12cb9f345e8d03a20693.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://pic.imgdb.cn/item/65dac8db9f345e8d03eac742.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 24s;background: url(https://pic.imgdb.cn/item/65bb5ce1871b83018a3ed949.jpg)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 20s;background: url(https://pic.imgdb.cn/item/65b8fae0871b83018a629f5a.jpg)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 16s;background: url(https://pic.imgdb.cn/item/65b8fa8e871b83018a610f7f.jpg)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 8s;background: url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 4s;background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}



</style >
<div id="papa" >
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>

</div>


<style>
#bfqbg {margin: -120px -300px;
        width:1164px;
        height: 120px;
       
        border-radius:2px;
        position: relative;overflow: hidden;
        z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:35px; left:70%;width: 200px;height: 50px;opacity: .8;}
#dt img{height: 100%;width: 100%;}
audio {position:absolute;top:80px;left:75px;z-index: 50;
width: 90%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

#bt{ width: 500px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 16px; font-family:仿宋;z-index: 21;}

</style>

<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65fa42669f345e8d03c830a3.gif" /></div>
<img id="tp" src="https://pic.imgdb.cn/item/6574fa4dc458853aefca81ff.jpg" alt="" />
<div id="bt">我已不是当初模样-魏佳艺</div>
<audioid="aud" loop controls autoplay>
<source src="https://wp.shq.cab/view.php/33f33e74bef807b7744b1369ab4c81e8.mp3" type="audio/mp3" /></audio>
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
</div>

<style type="text/css">
.lrc{z-index: 20;
    width: 80%;bottom:-18px; left:15%;
    height: 100px;
    overflow: hidden;
    display: block;position: absolute;
    margin: 0 auto;}
.lrc #ullrc{
width: 700px;
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: 25px;
    color: #ffffff;}
</style>
<script >
var lrc = `我已不是当初模样
演唱：魏佳艺
作词：灵凡
作曲：木易
编曲：漠心藤
吉他：漠心藤
我已不是当初模样
混音：一楠先生
制作人：亚伦
封面设计：亚伦
艺人统筹：蓝舟
监制：Super
出品人：亚伦
OP/SP：影音工作室
我一路走一路回头望
回首往事只剩一身沧桑
停不下脚步渡不过心中的迷惘
慢慢遗忘最初信仰
我不知已热泪过几场
再多的苦累只能心里藏
我背上了行囊哪是我的避风港
谁能让我不再悲伤
我已不是当初模样现实将梦埋葬
每一步都走的踉踉跄跄
前半生已过为了碎银几两
深夜匆匆忙忙走在路上
我已不是当初模样 生活将梦遗忘
这事态炎凉我慢慢品尝
前半生已过我却还在流浪
到底哪里才会是我的梦乡
我不知已热泪过几场
再多的苦累只能心里藏
我背上了行囊哪是我的避风港
谁能让我不再悲伤
我已不是当初模样现实将梦埋葬
每一步都走的踉踉跄跄
前半生已过为了碎银几两
深夜匆匆忙忙走在路上
我已不是当初模样 生活将梦遗忘
这事态炎凉我慢慢品尝
前半生已过我却还在流浪
到底哪里才会是我的梦乡
我已不是当初模样现实将梦埋葬
每一步都走的踉踉跄跄
前半生已过为了碎银几两
深夜匆匆忙忙走在路上
我已不是当初模样 生活将梦遗忘
这事态炎凉我慢慢品尝
前半生已过我却还在流浪
到底哪里才会是我的梦乡
`;
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;
    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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image0 = document.getElementById("testImg");
var image= document.getElementById("Img");

let mState = () => aud.paused ? (image.stop(),image0.classList.add('stop')):(image.play(),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2024-3-20 16:10

这个把小播用到背景里了，真好{:4_199:}

红影 发表于 2024-3-20 16:12

这个不是一键全控了呢。不过效果很好的。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-3-20 16:13

哦，我说错了，仍然是一键全控。不能全控是因为我评分后没刷新{:4_173:}

红影 发表于 2024-3-20 16:14

这个怎么发到油坊了，想高亮才看到。帮你转到动画音画里去了哦{:4_187:}

亚伦影音工作室 发表于 2024-3-20 16:27

红影 发表于 2024-3-20 16:14
这个怎么发到油坊了，想高亮才看到。帮你转到动画音画里去了哦

没留意，谢谢红影老师！

红影 发表于 2024-3-20 16:58

亚伦影音工作室 发表于 2024-3-20 16:27
没留意，谢谢红影老师！

不客气啊，再赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2024-3-20 21:47

亚伦把这个小播加了背景图图了，这样看起来更加完善了{:4_199:}

小辣椒 发表于 2024-3-20 21:48

亚伦的千变万化的代码都非常漂亮的，感谢分享精彩的制作{:4_187:}

查看完整版本: 画面和播放器分离