论坛 › 欢乐水吧 › html5视频 音乐[放映机]播放器《我的红颜知己》珍藏版

亚伦影音工作室 发表于 2023-4-14 13:59

html5视频 音乐[放映机]播放器《我的红颜知己》珍藏版

本帖最后由 亚伦影音工作室 于 2023-4-14 15:21 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background: linear-gradient(132deg, rgba(13, 34, 237, 0.41) 0%,#1a2a6c 33%,#b21f1f 82%,#F20411 100%);
        box-shadow:0px 0px 0px 2px #cccccc,0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }

#an{position: absolute;
      top:0%; left:0%;z-index: -1;
      width: 100%;
      height:100%;
   }

#tp {position: absolute;box-shadow: 0px 0px 0px 2px #fff000, 0px 0px 10px 13px #cccccc;
        left: 520px;border-radius: 1%;z-index: 2;
        top: 18%;background: url('//img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b273937938b1acfa3df3283fd40141c7.jpg') center/cover no-repeat;
        width: 560px;transform:perspective(600px) rotate(-1deg)rotateY(-10deg)scale(1);
        height: 340px;opacity: 0.9;overflow: hidden;}

#vid { display: none; }
#canv {position: absolute;
        display: block;
        left: 0%;
        top: 0%;width: 100%;
        height: 100%;
        border-radius: 0%;
        opacity: 1;transform:scale(1.1,1.17);
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;
        left:5%;
        bottom: 200px;
        width: 40px;
        height: 30px;
        border: 2px solid #bbbbbb;
        border-radius: 10%;
        opacity: 0.2;transform:perspective(80px) rotateY(15deg)rotate(-5deg)scale(1);
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #bbbbbb;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left:40%;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #bbbbbb;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;left:40%;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">

<div id="tp"><canvas id="canv"></canvas><div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div></div>
        <img id="an" src="https://www.kumeiwp.com/sub/filestores/2022/11/23/30ea5fdc6b89dbfb4c7f3d5494a7fd41.gif" width="100%" height="100%">
        <div id="testBtn"> <div id="mplayer"></div></div>
<div id="rotate-words">
<div>我的红颜知己<br />
<span>(慢四舞曲版)</span></div>

<div>葛笑&张灵敏<br />
<span></span></div>

<div>字幕：亚伦<br />
<span>Word/Song: Chunmei</span></div>

<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>
</div>
</div>
<audio id="aud" src="https://djplay.xiluweb.com/SR2/OKWMA/Z/2018/5/20180513013117021702.mp3" loop autoplay></audio>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/21/01/19/21011923413336507390.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width =1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

<script >
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
            this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #800000, #800000);
        position: absolute;z-index: 3;
        left: 10%;
        transform: translate(100%);
        top: 80%;transform:perspective(80px) rotate(1deg)rotateY(-10deg)scale(1);
        font:normal 2.2em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 0px 0px 2px)drop-shadow(#FFFFFF 0px 0px 2px)drop-shadow(#FFFFFF 0px 0px 2px);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;left: 0%;
        height: 100%;top: 0%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `我的红颜知己
词：王兆鑫
曲：王兆鑫
茫茫人海遇见你
今生注定我和你
在一起不分离
你就是我的唯一
茫茫人海中相识
今生注定在一起
我爱你 你爱我
你就是我今生的寄托
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
茫茫人海中相识
今生注定在一起
我爱你 你爱我
你就是我今生的寄托
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
茫茫人海中相识
今生注定在一起
我爱你 你爱我
你就是我今生的寄托
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
茫茫人海中相识
今生注定在一起
我爱你 你爱我
你就是我今生的寄托
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
你是我的红颜
我要好好的珍惜
你是我的知己
我要和你在一起
你是我的红颜
我要爱你不分离
你是我的知己
我要把你放在我心底
我会好好把你来珍惜
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60),
        sec = parseFloat(val % 60);
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</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 image = document.getElementById("an"),
    button = document.getElementById("testBtn");
   
if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:40% 0;
font-size:2.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 24s linear 10 ;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.7)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
</style>

红影 发表于 2023-4-14 16:54

漂亮的老播放机效果，还有浮动的按钮。亚伦老师的制作真美{:4_187:}

红影 发表于 2023-4-14 16:55

奇怪，点击暂停后，那个老式播放机怎么不见了？

小辣椒 发表于 2023-4-14 20:50

这个和前面那个是一样的吗？

梦缘 发表于 2023-4-14 21:09

很美的帖，欣赏问好！{:4_187:}

亚伦影音工作室 发表于 2023-4-14 21:47

本帖最后由 亚伦影音工作室 于 2023-4-14 21:49 编辑

小辣椒 发表于 2023-4-14 20:50
这个和前面那个是一样的吗？
这个是视频消音重新加音乐和字幕！主背景是动态放映机图片，投屏是视频，和之前做的相反！投屏可是图片，也可以是动画，也可以是视频等。音画一键控制！

小辣椒 发表于 2023-4-17 20:49

亚伦影音工作室 发表于 2023-4-14 21:47
这个是视频消音重新加音乐和字幕！主背景是动态放映机图片，投屏是视频，和之前做的相反！投屏可是图片， ...

亚伦好棒~~

我前面没有仔细看的

查看完整版本: html5视频 音乐[放映机]播放器《我的红颜知己》珍藏版