经典老歌
本帖最后由 寻梦花园 于 2023-11-3 00:36 编辑 <br /><br /><div id="playframe" style="width:850px;height:500px; left: 0px;top:33px; !imprtant;margin:16px auto;position:relative;overflow:hidden;border:12px brown solid;border-radius:0px;min-height:500px;">
<video id="sp" src=''loop autoplay muted type="width='100%';height:auto ;position:absolute"></video>
<style>
</style>
<div id="bt"style="position: absolute; width: 700px; top:10px; left:0;font-family:迷你简细圆;font-size: 26px;text-shadow: 2px 2px #ff00ff;font-weight:bold; color:#802A2A;z-index: 10;">
</div>
<div id="playframe">
<script type="text/javascript">
var audioArray =[
["http://storage.live.com/items/1965B2B1656C2AF6!14177?","https://imgessl.kugou.com/uploadpic/softhead/400/20210118/20210118102115635.jpg","少年壮志不言愁 (刘欢)","https://kvideo01.youju.sohu.com/e25ddd28-aef7-4547-998c-8112014519422_0_0.mp4"],["http://storage.live.com/items/1965B2B1656C2AF6!14168?","https://imgessl.kugou.com/stdmusic/20180206/20180206152337585537.jpg","在那桃花盛开的地方 (蒋大为)","https://kvideo01.youju.sohu.com/c09d9223-9a5a-4639-a9e4-5a9df488d3142_0_0.mp4"],["http://storage.live.com/items/1965B2B1656C2AF6!14169?","https://imgessl.kugou.com/stdmusic/20200928/20200928013815202160.jpg","山不转水转 (那英)","https://kvideo01.youju.sohu.com/6fe50f4e-046e-416e-9909-7090d70f65c82_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14166?","https://imgessl.kugou.com/uploadpic/softhead/400/20201203/20201203101930836.jpg","太阳岛上 (郑绪岚)","https://kvideo01.youju.sohu.com/3153c4f2-94e2-479d-933e-ef6532c250182_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14164?","https://img1.baidu.com/it/u=2099784890,806697956&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500","在那遥远的地方 (臧玉琰)","https://kvideo01.youju.sohu.com/09c0dcfd-f8f1-443b-ade6-0adb86ebf35d2_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14175?","https://imgessl.kugou.com/stdmusic/20150714/20150714160320838730.jpg","请到天涯海角来 (沈小岑)","https://kvideo01.youju.sohu.com/19b5a376-97ba-49bb-ad47-72354261e1c82_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14172?","https://imgessl.kugou.com/stdmusic/20160908/20160908000446532023.jpg","我多想唱 (李玲玉)","https://kvideo01.youju.sohu.com/412f32ca-556f-48a7-a08e-e7772584f5732_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14174?","https://imgessl.kugou.com/stdmusic/20160908/20160908012057394746.jpg","爱的奉献 (韦唯)","https://kvideo01.youju.sohu.com/0816c9f3-4e8f-41b8-b021-ae80293bde742_0_0.mp4"],
["http://storage.live.com/items/1965B2B1656C2AF6!14167?","https://imgessl.kugou.com/stdmusic/20210108/20210108170212149405.jpg","军港之夜 (苏小明)","https://kvideo01.youju.sohu.com/83aa7c0d-8fa4-4a06-9d2d-1ac4417f0f482_0_0.mp4"],
]
var opts = {
audioParas:audioArray,
frameID:"playframe"
};
function playMP4(opts) {
var dFrame = document.getElementById(opts.frameID);
var player = document.createElement('audio');
player.autoplay= true;
dFrame.appendChild(player);
var divObj = document.createElement('div');
divObj.style.width = '300px';
divObj.style.height = '400px';
divObj.style.position = 'absolute';
divObj.style.left = '30px';
divObj.style.top = '60px';
divObj.style.overflowY = 'auto';
divObj.style.overflowX = 'hidden';
divObj.style.visibility = 'hidden';
divObj.style.scrollbarWidth = 'thin';
var olObj = document.createElement('ol');
olObj.style.width = '100%';
olObj.height = '100%';
olObj.style.color = 'blue';
olObj.style.cursor = 'pointer';
var items = new Array();
for(i = 0 ; i < opts.audioParas.length; i++) {
oli = document.createElement('li');
oTxt = document.createTextNode(opts.audioParas);
oli.appendChild(oTxt);
olObj.appendChild(oli);
items = oli;
}
divObj.appendChild(olObj);
dFrame.appendChild(divObj);
divObj.style.visibility = 'visible';
/*dFrame.onmouseover = function() {
divObj.style.visibility = 'visible';
}
dFrame.onmouseout = function() {
divObj.style.visibility = 'hidden';
}*/
player.onended = function() {
items.style.color = 'blue';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = opts.audioParas;
items.style.color = 'red';
player.play();
}
for(n = 0; n < items.length; n++) {
items.onclick = function() {
player.pause();
items.style.color = 'blue';
for(j = 0; j < items.length; j++) {
if(this.innerHTML == opts.audioParas) {
player.src = opts.audioParas;
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
sp.play();
}
}
var curIdx = 0;
player.focus();
player.src = opts.audioParas;
sp.src = opts.audioParas;
items.style.color = 'red';
items.click();
}
playMP4(opts);
</script> 制作真漂亮，都是好听的经典 谢谢寻梦花园朋友分享，周末快乐！
{:4_204:}{:4_199:} {:4_208:} 都是经典老歌，好听 替换歌曲时候，演唱者的头像和视频背景也会变化。这个制作真不容易。欣赏寻梦花园好帖{:4_199:} 超级喜欢老歌。 我很喜欢，谢谢分享。
页:
[1]