黄梅戏选段 --- 韩在芬
本帖最后由 起个网名好难 于 2024-9-1 20:02 编辑 <br /><br /><meta http-equiv="content-type" content="text/html;charset=utf-8"/><!-- 引入外部 CSS 设置 >
<link rel="stylesheet" type="text/css" href="https://lkvv.obs.cn-south-1.myhuaweicloud.com/mlqs/mlqs/audioplayerengine/initaudioplayer-1.css"-->
<link rel="stylesheet" type="text/css" href="https://file.uhsea.com/2408/af6f7c52dbe1052a4b3acf8c8458715cTF.css">
<!-- 自定义的 CSS 设置 -->
<style>
#oBlk {
width:1200px;height:800px; position:relative;overflow:hidden; border-radius:32px; box-shadow:4px 4px 8px black;margin:32px 0 32px calc(50% - 681px);
background-image:url(https://img2.baidu.com/it/u=3293126089,1211171555&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800);
}
#amazingaudioplayer-1 {display:block;position:absolute;left:50px; top:32px;width:300px;height:164px; border-radius:16px 16px 0 0; box-shadow:2px 2px 6px black;}
#amazingaudioplayer-1 .amazingaudioplayer-info {font-size:12px; color:#88f;}
#amazingaudioplayer-1 .amazingaudioplayer-tracklist-container {background-image:linear-gradient(to bottom, transparent 0%, gray 100%);}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
</style>
<!-- HTML 代码 -->
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/16/5e1c373af3b57.mp4" loop autoplay muted></video>
<div id="amazingaudioplayer-1">
<ul class="amazingaudioplayer-audios" style="display:none;">
</ul>
</div>
</div>
<!-- JS 代码 -->
<script>
// 依次加载外部 js 文件
let sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js';
sf0.onload = function (){
console.log('load jquery');
jQuery.noConflict();
let sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = 'https://file.uhsea.com/2409/96ad9b14238aa462c17ffb430d2effb7F8.js';
sf1.onload = function (){
console.log('load amazingaudioplayer');
let sf2 = document.createElement('script');
sf2.type = 'text/javascript';
sf2.src = 'https://lkvv.obs.cn-south-1.myhuaweicloud.com/mlqs/mlqs/audioplayerengine/initaudioplayer-1.js';
sf2.onload = function (){
console.log('load initaudioplayer-1');
}
document.head.appendChild(sf2);
}
document.head.appendChild(sf1);
}
document.head.appendChild(sf0);
// 歌曲条目信息
var opts = [
{
artist:"韩再芬",
title:"谁料皇榜中状元",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273846.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"满工对唱",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273845.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"小花伞",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273848.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"琵琶词",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273839.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"送香茶",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273844.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"我来为你唱徽州",
album:"韩再芬的歌",
info:"",
image:"https://p2.music.126.net/8q3zG8792j6UMzTlKWHDmA==/7938473954611957.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=34204984.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"采莲",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273847.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"徽州歌谣",
album:"韩再芬的歌",
info:"",
image:"https://p2.music.126.net/8q3zG8792j6UMzTlKWHDmA==/7938473954611957.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=34204983.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"选郎选了九十九",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273843.MP3", type:"audio/mpeg"
},
{
artist:"韩再芬",
title:"黄梅树",
album:"黄梅飘香",
info:"",
image:"http://p2.music.126.net/CRCLAqMbkNpBvdNJcjSTTA==/7827423279329063.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=29273838.MP3", type:"audio/mpeg"
},
];
// 构造菜单条目
let ulObj = oBlk.querySelector('.amazingaudioplayer-audios');
opts.forEach(opt => {
let liObj = document.createElement('li');
liObj.dataset.artist = opt.artist;
liObj.dataset.title = opt.title;
liObj.dataset.info = opt.info;
liObj.dataset.album = opt.album;
liObj.dataset.image = opt.image;
liObj.dataset.duration = opt.duration;
let divObj = document.createElement('div');
divObj.dataset.src = opt.src;
divObj.dataset.type = opt.type;
divObj.className = "amazingaudioplayer-source";
liObj.appendChild(divObj);
ulObj.appendChild(liObj);
});
// 背景视频启停
oBlk.onclick = () =>vid.play() ;
</script>
不甘心失败，再次尝试直接贴代码{:5_106:} 本帖最后由 起个网名好难 于 2024-9-1 18:39 编辑
醉美水芙蓉 发表于 2024-9-1 18:25
佩服老师研究的精神！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 醉美水芙蓉 发表于 2024-9-1 18:27
我怎么看到的视频一会儿全屏，一会儿只有下面一点点!
这个倒没注意。 醉美水芙蓉 发表于 2024-9-1 18:28
歌曲切换没有问题，点击视频不停止，点击歌曲停视频不停！
为避免麻烦视频一旦启动就不停了 醉美水芙蓉 发表于 2024-9-1 18:29
移动屏幕视频就在下面了！
是用手机看的吧 醉美水芙蓉 发表于 2024-9-1 18:30
好奇怪，再移动视频又全屏了！
电脑上没见这样的问题，在手机上我就没正常看过（有视频的帖子）。 醉美水芙蓉 发表于 2024-9-1 19:05
我电脑360浏览器看的，估计是浏览器问题！
不敢用360{:5_102:} 醉美水芙蓉 发表于 2024-9-1 19:28
老师用的哪款浏览器？
就是win 10 系统自带的 Edge 浏览器. 拉动浏览器滚动条或滚动鼠标，向上、向下滚动时画面中背景视频出现在不同位置。 彩云归 发表于 2024-9-1 19:33
拉动浏览器滚动条或滚动鼠标，向上、向下滚动时画面中背景视频出现在不同位置。
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 彩云归 发表于 2024-9-1 19:33
拉动浏览器滚动条或滚动鼠标，向上、向下滚动时画面中背景视频出现在不同位置。
真奇怪，我这没法复现您说的这种现象。
试了三个不同的浏览器 Edge、Chrome、Firefox 都是正常的。 {:4_199:}