论坛 › 欢乐水吧 › 老式放映机

亚伦影音工作室 发表于 2024-1-9 22:01

老式放映机

本帖最后由 亚伦影音工作室 于 2024-4-16 10:29 编辑 <br /><br /><style>
#papa {margin: 150px -310px;
        width: 1168px;
        height: 640px;
background:#000000 url('https://')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;       
}

#vid { position: absolute; width: 100%; height: 100%; top:0%; left:0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1;}

#vid1 { position: absolute; width: 55%; height: 63%; top:15%; left:40%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 2;border-radius: 8%;-webkit-transform:translate(0%,0%)perspective(950px)scale(1) rotateY(-35deg)rotate(-5deg);}

#dt{position: absolute;width: 55%; height: 63%; top:15%; left:40%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 2;border-radius: 12%;-webkit-transform:translate(0%,0%)perspective(950px)scale(1) rotateY(-35deg)rotate(-5deg);z-index:3;mix-blend-mode: difference;}

#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:94%; left:50%;
        bottom: 20px;
        width: 30px;
        height: 15px;background:#333333;
        border: 0px solid #000000;
        border-radius: 10%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 5px 8px;
        border-color: transparent transparent transparent #ffffff;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 1px;
        height: 10px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 10px sans-serif;
      color: #00ff00;
         top:94%;
      left:74%;}

#prog {position: absolute;z-index: 91;
      width: 20%;
      height: 0.6%;
      cursor: pointer;
         top:95%;

box-shadow: 0px 0px 1px 1px #cccccc;
         left:53%;border-radius: 0px;}
#musickrc{width:45%;line-height:30px;position: absolute;position: absolute;left:50%;top:68%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);-webkit-transform:translate(0%,0%)perspective(100px)scale(1) rotate(2deg);}
#musickrc span {display:block;text-align:center; }
#bt{ width: 15%; height: 50px;color: #ffffff; position: absolute; left:36%;top:94%;font-size: 14px; font-family:仿宋;z-index: 21;}
</style>

<div id="papa">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/659d4bdf871b83018aafa20f.gif" width="100%" height="100%"></div>

<video id="vid"src="http://chuangshicdn.data.mvbox.cn/music/yc/24/01/10/24011022311496281138.mp4" muted autoplay loop></video>

<video id="vid1"src="http://chuangshicdn.data.mvbox.cn/music/yc/24/01/05/24010521422349124314.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:center;font-weight: ;font-family:华文隶书;font-size: 30px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
<div id="bt">爱到天荒地老 - 唐艺</div>
</div>
<audio id="aud" src="https://bzgz.club/view.php/7f73022c0f46f702fed9ccd59757b049.mp3" loop autoplay></audio>

<script >
var songkrc =`爱到天荒地老 - 唐艺
曲Composer：刘涛
词Lyricist：刘涛/赵大白
制作人Producer：刘涛
编曲Arranger：谭侃侃
OP/SP：亚伦影音工作室
我希望你
一直都会爱我不管是现在或未来
我答应你
不管岁月如何更改都会一直爱你
一字一句一点一滴
千言万语不如爱你
你相信所以我相信
小小幸福捧在手心
开出花朵开过四季
手牵着手慢慢老去
多幸运爱的此刻
一直有你陪着
跨过时间的河
世上如此难得
如你一般清澈
你是我最美的景色
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
故事的开头和以后
最想是与你白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
我希望你
一直都会爱我不管是现在或未来
我答应你
不管岁月如何更改都会一直爱你
一字一句一点一滴
千言万语不如爱你
你相信所以我相信
小小幸福捧在手心
开出花朵开过四季
手牵着手慢慢老去
多幸运爱的此刻
一直有你陪着
跨过时间的河
世上如此难得
如你一般清澈
你是我最美的景色
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
故事的开头和以后
最想是与你白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
翻过了岁月的山丘
我们一直到白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
`;

function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/

/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #333333 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
/*结束*/
</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;
            }
      }
    };
}

vid=document.querySelector('#vid');vid1=document.querySelector('#vid1');
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),vid1.pause()):(image.play(),vid.play(),vid1.play())};
</script>

小辣椒 发表于 2024-1-9 22:12

亚伦这个播放器修改的漂亮，许多可以通用{:4_199:}

小辣椒 发表于 2024-1-9 22:13

这个视频代码还做了有角度的，亚伦很棒{:4_178:}

小辣椒 发表于 2024-1-9 22:15

这个播放器我也是很喜欢的，只是时间太少，晚上玩的时候太短，我也是要玩一次的{:4_173:}

亚伦影音工作室 发表于 2024-1-9 22:19

小辣椒 发表于 2024-1-9 22:15
这个播放器我也是很喜欢的，只是时间太少，晚上玩的时候太短，我也是要玩一次的

两个视频，一个动图，歌曲一首，通过控件可以暂停！

小辣椒 发表于 2024-1-9 22:31

亚伦影音工作室 发表于 2024-1-9 22:19
两个视频，一个动图，歌曲一首，通过控件可以暂停！

这个我要自己实践一次，但纯套用我可以秒做的，只是想自己修改一下就得花点时间

红影 发表于 2024-1-9 22:31

那个小视频的设置空间特别吻合，还带点电视雪花的效果呢。这个制作真漂亮，太赞了{:4_199:}

红影 发表于 2024-1-9 22:37

歌词也能跟着小视频一起扭转，真神奇{:4_187:}

红影 发表于 2024-1-9 22:39

这个调整很不容易，包括调方向和调位置、大小和透视都很不易。亚伦老师辛苦{:4_187:}

红影 发表于 2024-1-9 22:41

所有的都能一键全控，不过那张动图还是用静态替代的，不是即时的暂停呢，其他的都是即时的{:4_187:}

亦是金 发表于 2024-1-9 23:45

欣赏学习了，制作辛苦，谢谢分享！{:4_190:}

庶民 发表于 2024-1-10 07:22

这个好玩。

老谟深虑 发表于 2024-1-10 15:02

          老师的代码很不错，欣赏学习了。

梦油 发表于 2024-1-10 16:32

我小时候最爱看电影了，那时候在广场放映的电影机大部分是单机，一本放完了还得换一本。

亚伦影音工作室 发表于 2024-1-10 17:01

梦油 发表于 2024-1-10 16:32
我小时候最爱看电影了，那时候在广场放映的电影机大部分是单机，一本放完了还得换一本。

童年的回忆，爱看老电影，特别是侦查兵，渡江侦查记奇袭，抗战片，怀念！

侃大山 发表于 2024-1-10 19:39

制作漂亮{:4_204:}

梦油 发表于 2024-1-11 14:16

亚伦影音工作室 发表于 2024-1-10 17:01
童年的回忆，爱看老电影，特别是侦查兵，渡江侦查记奇袭，抗战片，怀念！

儿时的乐趣难忘啊。

查看完整版本: 老式放映机