走近香港
本帖最后由 杨帆 于 2026-9-15 18:05 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>走近香港</title>
<style>
#papa {margin: 80px 0px;width: 1400px;height: 92vh;left: calc(50% - 81px);transform: translateX(-50%); background: url('https://s3.bmp.ovh/2026/09/15/d9wS1BfF.jpg') no-repeat center/cover;box-shadow: 2px 2px 8px #000; overflow: hidden;--state:running;z-index:1; position: relative;}
.vid { position: absolute; width: 100%; height: 100%;z-index:1; object-fit: cover;}
#mutedbnt{ position:absolute; z-index: 10; width: 100px; height: 100px;left:10%;top:2%; cursor: pointer;}
#fullscreen{position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:10;}
#fullscreen:hover{font-style:italic;}
#mplayer{position:absolute;text-align:center;top:96%;transform:translate(-50%);left:50%;z-index:30;font-size:18px;color:#0066CC;}
#mprog{width:500px;height:3px;accent-color:darkgreen;outline:none;cursor:pointer;}
.time-display { position: absolute; left:13%;top:13%; transform: translateX(-50%); z-index: 20; font-size: 30px; font-weight: 400; font-family: '华文楷体', 'KaiTi', '楷体', 'STKaiti', serif; letter-spacing: 1px; pointer-events: none; background: linear-gradient( 135deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff00ff ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: rainbowMove 4s ease-in-out infinite alternate; text-shadow: 0 0 30px rgba(255, 255, 255, 0.1); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.2)); }
@keyframes rainbowMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.time-display.stop { animation-play-state: paused; }
</style>
</head>
<body>
<div id="papa">
<div class="time-display" id="timeDisplay">00:00 走近香港 00:00</div>
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" id="mutedbnt" onClick="pc()" title="播放/暂停"/>
<span id="fullscreen">全屏欣赏</span>
<video class="vid" src="https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000d47c0dnog65pal8f566g" autoplay loop preload="auto" playsinline muted></video><metaname="referrer" content="never">
<audio id="audio" src="http://music.163.com/song/media/outer/url?id=2659961208.mp3" loop autoplay preload="auto" playsinline></audio>
<div id="mplayer" data-tt="00:00 00:00"><input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"/></div>
</div>
<script>
const papa = document.getElementById('papa');
var pic = document.getElementById("mutedbnt");
var audio = document.getElementById("audio");
const vid = document.querySelector('.vid');
const fullscreenBtn = document.getElementById('fullscreen');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const timeDisplay = document.querySelector('.time-display');
function pc() {
if (!vid.muted) {
pic.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png";
vid.pause(); vid.muted = true; papa.style.setProperty('--state', 'paused');
timeDisplay.classList.add('stop');audio.pause();
} else {
pic.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
vid.play(); vid.volume = 1; vid.muted = false; papa.style.setProperty('--state','running');
timeDisplay.classList.remove('stop');audio.play();audio.volume = 0.8;
}
var mseek = false;
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;
}
vid.addEventListener('loadedmetadata', () => {
mplayer.dataset.tt = toMin(0) + ' ' + toMin(vid.duration);
});
vid.addEventListener('timeupdate', () => {
if(!vid.duration) return;
if(!mseek) mprog.value = (vid.currentTime / vid.duration) * 100;
mplayer.dataset.tt = toMin(vid.currentTime) + ' ' + toMin(vid.duration);
timeDisplay.textContent = `${toMin(vid.currentTime)} 走近香港 ${toMin(vid.duration)}`;
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => {
if (!vid.duration) return;
const targetTime = (mprog.value / 100) * vid.duration;
vid.currentTime = targetTime;
mprog.oninput = () => {
if(!vid.duration) return;
let currentTime = (mprog.value / 100) * vid.duration;
mplayer.dataset.tt = toMin(currentTime) + ' ' + toMin(vid.duration);
}
};
}
window.pc = pc;
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audio.paused) audio.pause();vid.pause();
} else {
if (audio.paused && !audio.ended) audio.play().catch(()=>{});vid.play().catch(()=>{});
}
});
let fs = true;
fullscreenBtn.onclick = ()=>{
if(fs){
papa.requestFullscreen().catch(e=>console.log(e));fullscreenBtn.innerText = '退出全屏';
}else{
document.exitFullscreen(); fullscreenBtn.innerText = '全屏欣赏';
}
fs = !fs;
};
window.addEventListener('load', () => {pc();
});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
papa.addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>
学习了 这个视频太棒了，从来没有这么详细的了解香港，谢谢杨版分享！{:4_176:} 夕阳黄昏 发表于 2026-9-15 18:22
学习了
谢谢夕阳老师鼓励，请多指导，祝开心{:4_190:} 魏淑芬 发表于 2026-9-15 18:43
这个视频太棒了，从来没有这么详细的了解香港，谢谢杨版分享！
是，虽然以前也去过，但了解并不多。谢谢淑芬老师鼓励，祝开心{:4_204:} 杨帆这个视频运用的真好，我网络卡，刷新N次终于看见了，非常美{:4_199:} 很好的帖子，图文并茂，制作精美。特别赞佩！{:4_204:}{:4_190:}
很好的帖子，图文并茂，制作精美。特别赞佩！{:4_204:}{:4_190:}
欣赏杨帆精彩的制作，简单而大气，背景这个图一定要加，否则手机看不见视频的，我就是手机看不见效果，电脑上来再欣赏的 这个真好，可以从帖子里了解一下香港，这个介绍很不错。
欣赏扬帆好帖{:4_187:} 霜染枫丹 发表于 2026-9-15 21:42
很好的帖子，图文并茂，制作精美。特别赞佩！
偶然看到这个视频，与大家分享，谢谢枫丹老师鼓励{:4_187:} 小辣椒 发表于 2026-9-15 21:48
欣赏杨帆精彩的制作，简单而大气，背景这个图一定要加，否则手机看不见视频的，我就是手机看不见效果，电脑 ...
是，视频加载稍慢，加了这个背景图，谢谢小辣椒鼓励{:4_204:} 红影 发表于 2026-9-15 22:26
这个真好，可以从帖子里了解一下香港，这个介绍很不错。
欣赏扬帆好帖
谢谢影子鼓励，祝开心{:4_187:}
页:
[1]