UID1308
主题
帖子
积分60845
金钱
贡献
阅读权限150
在线时间 小时
最后登录1970-1-1
注册时间2017-5-2
|
沙发

楼主 |
发表于 2025-7-26 15:45:32
|
只看该作者
视频背景播放器代码分享:
- <div class="cont-area">
- <div style="position:relative;width: 1400px;height: 580px;overflow:hidden;top: -10px;left: -10px;">
- <div style="left: 0px;position:absolute;top: 0px;">
-
-
- <div style="z-index: !;width: 1400px; height: 580px; top:0px; left:0px; overflow: hidden;transform: rotate(0deg);background-size: 100% 100%;background-image:url(); text-align: center;">
-
- <meta name="referrer" content="never">
- <video frameborder="0" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/liuyun.mp4" autoplay muted loop="" controls="" style="position:absolute;left:0px;top:-30px;background:#000 ;width:1366px; height: 800px;>
-
- <div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>
-
- </div>
-
- <img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/01.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/02.png" /> <img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/03.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/04.png" /> <img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/05.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/06.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/07.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/08.png" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428086611551.png" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428085831462.jpg" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428086728292.png" />
- <style type="text/css">
- .photo {
- width: 750px;
- height: 600px;
- position: absolute;
- top:0px;
- left:450px;
- z-index: 300;
- filter:contrast(120%)brightness(100%);
- -webkit-mask-image: radial-gradient(black 30% ,transparent 75%);
- animation: round 56s infinite;
- opacity: 0;
- }
-
- @keyframes round {1% {
- opacity: 0;
- transform:translate(0%,-100%)scale(0);}
- 5% {
- opacity: 1;
- transform:translate(0%,-100%)scale(0);}
- 14% {
- opacity: 1;
- transform:translate(0%,0%)scale(1);}
- 16% {
- opacity: 1;
- transform:translate(0%,0%)scale(1);}
- 24% {
- opacity: 0;
- transform:translate(0%,100%)scale(1);}
- }
-
- img:nth-child(11) {animation-delay: 150s;}
- img:nth-child(10) {animation-delay: 135s;}
- img:nth-child(9) {animation-delay: 120s;}
- img:nth-child(8) {animation-delay: 105s;}
- img:nth-child(7) {animation-delay: 90s;}
- img:nth-child(6) {animation-delay: 75s;}
- img:nth-child(5) {animation-delay: 60s;}
- img:nth-child(4) {animation-delay: 45s;}
- img:nth-child(3) {animation-delay: 30s;}
- img:nth-child(2) {animation-delay: 15s;}
- img:nth-child(1) {animation-delay: 0s;}
- </style>
- </div>
-
-
-
- <style type="text/css">
-
- @keyframes mv { from { background-position: 1366px 0; } to { background-position: 0 0; } }
-
- body { overflow-x: hidden; }
- #baiBox {
- margin: auto;
- width: 800px;
- text-align: center;
- font-family:微软简中圆;
- font-size: 2.5rem;
- font-weight: bold;
- color: #f46ff6;
- transform-origin: top;
- animation: yao 1.0s linear infinite alternate;
- }
-
- @keyframes yao {
- from{ transform: perspective(800px) rotatex(30deg); }
- to { transform: perspective(800px) rotatex(-30deg); }
- }
-
-
-
- .tit {
- position: relative;
- width: 300px;
- height: 30px;
- top:-560px;
- LEFT: -430px;
- z-index: 100;
- filter: drop-shadow(-1px 0px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)
- }
- #tit:hover { color: green; }
-
- </style>
-
- <div id="hu" >
- <div id="baiBox"
- <div class="tit">
- <span style="color:#fb52f9;"><span style="font-size:25px;">自选音乐集 </span>
- <span style="color:#3d46f7;"><span style="font-size:15px;"> - 群星</span></div>
-
-
-
- <div style="position: relative;width: 500px;height: 50px;top:-120px;LEFT: 1100px;z-index: 100;filter: ">
- <p><span style="color:#ff0000;"><span style="font-family:幼圆;"><span style="font-size:15px;">忘记了在线音乐</span></span></span></p></div>
-
- </style>
-
-
- <div style="position: relative; top:-760px;LEFT: 0px;z-index: 12435;">
- <style type="text/css">
- .lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.0em 悟空大字库, sans-serif; transition:.3s all ease;font-size:2.0em;}
- .lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
- .lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
- .lyricDisp:nth-child(2){color:blue;text-align:center;font-size:0em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
- #LRCShow{position:absolute;left:280px;bottom:0px;width:75%;height:140px;margin:6px auto position:relative;<!--歌词位置-->}
- #rdisk{position:absolute;left:83px;bottom:60px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;<!--光盘位置-->}
- @keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
- #ground3rd{
- width:1366px;height:700px;
- position:absolute;font-size:16px;
- overflow:hidden;border-radius:0px;
- margin:5px 0px 30px -5px;
- background:url(https://s4.ax1x.com/2022/03/05/bwbPNq.jpg);
- background-position:center;
- background-size: cover;
- perspective: 1366px;
- }
-
- #mpic {
- position: absolute;
- transform: rotateY(0deg);
- top: 0px;
- left: 0px;
- width: 1366px;
- height: 700px;
- animation: rote 80s linear infinite;
- cursor: pointer;
- opacity: 1;
- }
-
- @keyframes rote {
- from {
- background-position: 0 0;
- filter: hue-rotate(360deg)
- }
-
- to {
- background-position: -1730px 300px;
- }
- }
-
- #mpic1 {
- position: absolute;
- transform: rotateY(0deg);
- top: 0px;
- left: 0px;
- width: 1366px;
- height: 700px;
- animation: rotet 100s linear infinite;
- cursor: pointer;
- opacity: 1;
- }
-
- @keyframes rotet {
- from {
- background-position: 0 0;
- filter: hue-rotate(360deg)
- }
-
- to {
- background-position: 0px -1730px;
- }
- }
-
-
- #songList li {
- cursor: pointer;
- color: #ffffff;
- font:thick 微软雅黑;
- font-size:15px;
- line-height:25px
- }
- </style>
-
-
-
-
- <div id="ground3rd">
- <div class="itemm">
-
- <div style="width: 1366px;height: 700px;">
- <div style="position:relative;width: 1366px;height: 700px;overflow:hidden;top: 0px;left: 0px;">
- <div style="left: 0px;position:absolute;top: 0px;">
-
- </div>
- <ol id='songList' style="color:red;position:absolute;top:130px;left:60px;"><!--歌曲菜单位置--></ol>
- <div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
- background: url('http://www.bohann.net/data/attachment/forum/202305/21/153532woco6oprxkkuut88.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
- mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
- <div id="LRCShow"></div>
- </div>
-
-
- <!-- 下面一句是存放歌词的标签 -->
- <textarea style="visibility:hidden;" id='lrcContent0'></textarea>
-
- <script type="text/javascript">
- var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines[k]=document.createElement('div');this.gclines[k].className='lyricDisp';this.showLrcObj.appendChild(this.gclines[k])}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist[n].match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist[n].lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist[n].substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime[m].substr(1).replace(']','').split(/:/);_t=(+ta[0])*60+(+ta[1]);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push([0,'\u4ea6\u662f\u91d1\u5728\u7ebf\u97f3\u4e50\u0020\u0020\u0020\u6b22\u8fce\u4f60\uff01'])}this.lrcVec.push([_t,lrcTxt])}}}this.lrcVec.sort(function(a,b){return(a[0]-b[0])})},showLrc:function(durTime){this.gclines[0].innerHTML=this.gclines[0].dataset.lrc=this.lrcVec[this.idx][1].length>0?this.lrcVec[this.idx][1]:"\u3000";this.gclines[0].style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines[0].style.setProperty('--durTime',durTime+'ms');this.gclines[0].style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines[0].style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines[0].style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec[that.idx][0]){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec[that.idx+1][0]-that.lrcVec[that.idx][0])*950)}else{that.showLrc((this.duration-that.lrcVec[that.idx][0])*950)}if(that.idx+1==that.lrcVec.length){that.gclines[1].innerHTML=""}else{that.gclines[1].innerHTML=that.lrcVec[that.idx+1][1]}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
- </script>
-
- <script type="text/javascript">
- (function() {
- songParas = [
- ["科尔沁夫-心愿","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424635145806.mp3",`[00:00.000]心愿科尔沁夫
- [00:03.393]词:姜仁波
- [00:06.786]曲:赵天华
- [00:10.179]唱:科尔沁夫
- [00:13.572]混音:关青云
- [00:16.965]编曲:赵天华
- [00:20.358]马头琴:阿冷
- [00:23.751]制作人:科尔沁夫
- [00:27.144]出品;画你文化传媒(北京)有限公司
- [00:30.537]发行:音旅文化
- [00:33.930]我想用天边
- [00:37.920]天边的彩云
- [00:41.940]剪成一朵美丽的花瓣
- [00:49.890]让它沾满我的思念
- [00:58.350]穿越那片茫茫草原
- [01:05.880]我想把遥远
- [01:09.870]遥远的期盼
- [01:13.920]化作一场相逢的温暖
- [01:21.900]让它走进你的心间
- [01:30.420]聆听我的万语千言
- [01:37.890]云是我的信笺
- [01:41.850]我的信笺
- [01:45.840]风是我的呼唤
- [01:53.940]月光下我把
- [01:57.900]马奶酒斟满
- [02:02.340]今夜只等与你
- [02:05.910]梦里相见
- [02:43.920]我想用天边
- [02:47.910]天边的彩云
- [02:51.900]剪成一朵美丽的花瓣
- [02:59.880]让它沾满我的思念
- [03:08.370]穿越那片茫茫草原
- [03:15.930]我想把遥远
- [03:19.890]遥远的期盼
- [03:23.910]化作一场相逢的温暖
- [03:31.860]让它走进你的心间
- [03:40.410]聆听我的万语千言
- [03:47.970]云是我的信笺
- [03:51.900]我的信笺
- [03:55.830]风是我的呼唤
- [04:03.960]月光下我把
- [04:07.920]马奶酒斟满
- [04:12.360]今夜只等与你
- [04:15.870]梦里相见
- [04:21.959]你是我的思念
- [04:25.860]我的思念
- [04:29.910]月是我的缠绵
- [04:37.920]篝火旁我把
- [04:41.910]爱的心点燃
- [04:46.380]今夜我想与你
- [04:49.860]梦里相见`],
-
- ["雪莲花的心愿-科尔沁夫","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424741889665.mp3",`[00:00.0]雪莲花的心愿
-
- [00:02.85]作词:姜仁波
-
- [00:05.7]作曲:赵天华
-
- [00:08.55]演唱:科尔沁夫
-
- [00:11.4]编曲:赵天华
-
- [00:14.25]马头琴:阿冷
-
- [00:17.1]伴唱:莫晓伦
-
- [00:19.95]录音:赵天华
-
- [00:22.8]混音:关青云
-
- [00:25.65]音乐监制;尹宏峰
-
- [00:28.5]制作人:科尔沁夫
-
- [00:31.35]出品:北京天华音乐工作室
-
- [00:34.2]发行:内蒙古音旅文化传媒有限公司
-
- [00:37.05]是谁把思念冰封在雪山
-
- [00:45.36]化作相思泪流进我心间
-
- [00:53.61]是谁把爱恋留在了高原
-
- [01:02.01]让我守候着美丽的情缘
-
- [01:10.17]是谁的身影带走了思念
-
- [01:18.479996]化作一片云飘向了遥远
-
- [01:26.729996]是谁的等待盛开成雪莲
-
- [01:35.07]让我依恋着心香心香的花瓣
-
- [01:44.31]雪莲花的心愿你可曾听见
-
- [01:52.619995]转动的经筒为我祈求着心愿
-
- [02:00.9]那一个在梦里想念的人啊
-
- [02:09.15]是你的身影让我望眼欲穿
-
- [02:51.51]是谁的身影带走了思念
-
- [02:59.88]化作一片云飘向了遥远
-
- [03:08.13]是谁的等待盛开成雪莲
-
- [03:16.41]让我依恋着心香心香的花瓣
-
- [03:25.70999]雪莲花的心愿你可曾听见
-
- [03:33.99]转动的经筒为我祈求着心愿
-
- [03:42.27]那一个在梦里想念的人啊
-
- [03:50.52]是你的身影让我望眼欲穿
-
- [03:58.86]雪莲花的心愿你可曾听见
-
- [04:07.17]悠悠的情歌为你唱过了千遍
-
- [04:15.39]那一个在梦里想念的人啊
-
- [04:23.7]等你的身影在月光下出现
-
- [04:31.98]等你的身影在月光下出现`],
-
- ["送亲歌-云飞","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424826887392.mp3",`[00:00.0]送亲歌 - 云飞
-
- [00:06.03]词:鄂尔多斯民歌
-
- [00:13.38]曲:鄂尔多斯民歌
-
- [01:02.05]鸿雁展翅向南方
-
- [01:11.89]芳草低头躲秋凉
-
- [01:21.56]含泪告别阿爸阿妈
-
- [01:31.14]孩儿出嫁到远方
-
- [01:45.66]云雾缭绕在草原上
-
- [01:55.04]秋风吹来花凄凉
-
- [02:04.67]含泪告别众乡亲
-
- [02:14.26]今日出嫁到远方
-
- [03:07.33]鸿雁展翅向南方
-
- [03:14.32]芳草低头躲秋凉
-
- [03:21.5]含泪告别阿爸阿妈
-
- [03:28.7]孩儿出嫁到远方
-
- [03:38.3]马儿送我去远方
-
- [03:45.49]阿爸阿妈送安康
-
- [03:52.66]家里的奶茶常醉人
-
- [03:59.94]阿爸阿妈情谊深
-
- [04:09.4]家里的奶茶常醉人
-
- [04:19.17]阿爸阿妈情谊深 `],
-
- ["乌兰齐齐格 - 送亲歌","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424898391053.mp3",`[00:00.000]送亲歌 - 娜仁齐齐格
- [00:36.654]鸿雁展翅向南方
- [00:44.357]芳草地头多秋凉
- [00:52.407]含泪告别阿爸阿妈
- [01:00.308]孩儿出嫁到远方
- [01:08.408]云雾缭绕在草原上
- [01:16.212]秋风吹冷花凄凉
- [01:24.415]含泪告别众乡亲
- [01:32.216]今日出嫁到他乡
- [02:32.517]当年牧羊在西山岗
- [02:40.171]冬暖草场花最香
- [02:48.227]家中的奶茶常醉人
- [02:56.230]阿爸阿妈恩情长
- [03:04.332]男儿送我到远方
- [03:12.135]阿爸阿妈保安康
- [03:20.338]来世托身男子汉
- [03:28.143]终身陪伴在父老身旁
- [03:36.201]来世托身男子汉
- [03:44.054]终身陪伴在父老身旁 `],
-
- ["筱林萨克斯-送亲歌(bB-次中音与马头琴)","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424953719584.mp3",`[00:00.00]正播放:筱林萨克斯-送亲歌(bB-次中音与马头琴)`],
-
- [" 群星-送亲歌 (纯音乐) ","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753425008933617.mp3",`[00:00.00]正播放: 群星-送亲歌 (纯音乐) `],
-
- ["月亮落进山谷里-达坡玛吉","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753425062364092.mp3",`[00:00.000]月亮落进山谷里
- [00:16.130]达坡玛吉 词曲
- [00:32.260]演唱:达坡玛吉
- [00:48.390]月亮落进山谷里篝火点亮满星天满星天
- [01:04.290]站在古街的木桥上遥望马帮远去的背影
- [01:30.300]别告诉我你的心儿化成了云烟
- [01:38.340]别告诉我你的心儿化成了云烟
- [02:04.350]月亮落进山谷里玉水沐浴雪山颠雪山颠
- [02:20.250]走在清清的泉水边聆听雪山融化的声音
- [02:46.290]别告诉我你的雪花飞上了蓝天
- [02:54.330]别告诉我你的雪花飞上了蓝天
- [03:04.320]别告诉我你的雪花飞上了蓝天
- [03:13.620]只有遇到痴心的情郎阿妹才会歌唱罗 `],
-
- ];
-
- var opts = {
- lrcTxtID:'lrcContent0',
- lrcShowID:"LRCShow",
- audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
- audioCtrl:'rdisk'
- };
- var km = null;
- var idx = 0;
- let songList = document.getElementById('songList');
-
- for(n = 0; n < songParas.length; n++) {
- let item = document.createElement('li');
- item.id = 's'+n;
- item.innerHTML = songParas[n][0];
-
- songList.appendChild(item);
- }
-
- items = songList.getElementsByTagName('li');
-
- for(n = 0 ; n < items.length; n++) {
- items[n].onclick=function() {
- idx = parseInt(this.id.substr(1));
- document.getElementById('ground3rd').style.backgroundImage = `url(${songParas[idx][1]})`;
- if(km){
- km.stopMusic();
- //km = null;
- km.handleLrc(songParas[idx][3]);
- km.setAudioUrl(songParas[idx][2]);
- km.reStart();
- }
- else {
- document.getElementById(opts.lrcTxtID).innerHTML = songParas[idx][3];
- opts.audioURL=songParas[idx][2];
- km = new lrcPlayer2(opts);
- }
- }
- }
- items[0].click();
-
- setInterval(() => {
- if(km) {
- items = songList.getElementsByTagName('li');
- if(km.isMusicEnd()) {
- idx++; idx %= items.length;
- items[idx].click();
- }
- }
- //setTimeout(isSongEnded, 500);
- }, 500);
-
- })();
- </script>
复制代码
|
评分
-
2
查看全部评分
-
|