feat(video): add autoplay and dynamic video loading

- Add autoplay attribute to video player
- Implement dynamic calculation of needed regular videos based on window height
- Update video comments with Japanese content and remove default avatars
This commit is contained in:
2026-02-13 11:02:33 +08:00
parent bfe395d5bb
commit 63d428cd33
3 changed files with 42 additions and 28 deletions

View File

@@ -91,10 +91,37 @@ function loadRelatedVideos(currentVideo) {
shuffleArray(otherRegularVideos);
const selectedShorts = [...sameCategoryShorts, ...otherShorts].slice(0, 3);
const selectedRegularVideos = [...sameCategoryRegularVideos, ...otherRegularVideos].slice(0, 10);
// Calculate needed regular videos based on page height
const calculateNeededVideos = () => {
const windowHeight = window.innerHeight;
const relatedSection = document.querySelector('.related-videos-section');
const shortsSection = document.querySelector('.shorts-section');
if (!relatedSection || !shortsSection) {
return 10; // Default to 10 if elements not found
}
const shortsHeight = shortsSection.offsetHeight;
const availableHeight = windowHeight - shortsHeight - 48; // 48px for padding/gap
// Estimate height per regular video item (including gap)
const estimatedVideoHeight = 100; // Average height of each video item
// Calculate needed videos
const neededVideos = Math.ceil(availableHeight / estimatedVideoHeight);
// Ensure we don't exceed available videos
const totalAvailableVideos = sameCategoryRegularVideos.length + otherRegularVideos.length;
return Math.min(neededVideos, totalAvailableVideos);
};
const neededVideosCount = calculateNeededVideos();
const selectedRegularVideos = [...sameCategoryRegularVideos, ...otherRegularVideos].slice(0, neededVideosCount);
console.log('Selected shorts:', selectedShorts.length);
console.log('Selected regular videos:', selectedRegularVideos.length);
console.log('Selected regular videos:', selectedRegularVideos.length, '(needed:', neededVideosCount, ')');
console.log('Window height:', window.innerHeight);
selectedShorts.forEach(short => {
const shortElement = document.createElement('div');

View File

@@ -648,52 +648,39 @@
],
"comments": [
{
"author": "AnimeFan123",
"avatar": "img/avatar/default.jpg",
"author": "なかしーゆう",
"time": "2 hours ago",
"content": "This is amazing! The quality is incredible and the editing is top-notch. Keep up the great work!"
"content": "前から思ってたけど歌詞がかなりストーリーに沿ってるんだな。この作品とコマリの魅力が詰まってる"
},
{
"author": "MusicLover456",
"avatar": "img/avatar/default.jpg",
"author": "okuto0IXX",
"time": "5 hours ago",
"content": "I've been listening to this on repeat for days. Can't get enough of it!"
"content": "この歌を聞いてからアニメを見たのですが、アニメを見た後に再びこの歌を聞くとまた違う良さに気づく事が出来ました"
},
{
"author": "TechEnthusiast",
"avatar": "img/avatar/default.jpg",
"author": "user-im7jt4ts7i",
"time": "1 day ago",
"content": "Great explanation! Really helped me understand this topic better."
"content": "OPもEDもストーリーもいいし本当に期きてほしい"
},
{
"author": "GamerPro99",
"avatar": "img/avatar/default.jpg",
"author": "visitor-zx3sj",
"time": "2 days ago",
"content": "This gameplay is insane! How did you even manage to do that?"
"content": "Was brought to this amazing music only because Youtube recommended the anime to me...what a wonderful day to be a fan of yuri."
},
{
"author": "ArtFanatic",
"avatar": "img/avatar/default.jpg",
"time": "3 days ago",
"content": "The animation style is so unique and beautiful. Love it!"
},
{
"author": "SubscriberOne",
"avatar": "img/avatar/default.jpg",
"author": "Shiki0828",
"time": "4 days ago",
"content": "First! Been waiting for this video for so long!"
"content": "Underrated Japanese Singer"
},
{
"author": "CasualViewer",
"avatar": "img/avatar/default.jpg",
"author": "kurage_mizukurage",
"time": "5 days ago",
"content": "Just stumbled upon this channel and I'm already in love with the content!"
},
{
"author": "CommentMaster",
"avatar": "img/avatar/default.jpg",
"time": "1 week ago",
"content": "This deserves way more views! Sharing with all my friends!"
"content": "久しぶりに聴いたけど神曲。転すらの曲は全部神曲"
}
]
}

View File

@@ -169,7 +169,7 @@
<div class="video-main-section">
<!-- Video Player -->
<div class="video-player">
<video src="src/video.mp4" controls></video>
<video src="src/video.mp4" controls autoplay></video>
</div>
<!-- Video Info -->