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:
31
js/video.js
31
js/video.js
@@ -91,10 +91,37 @@ function loadRelatedVideos(currentVideo) {
|
|||||||
shuffleArray(otherRegularVideos);
|
shuffleArray(otherRegularVideos);
|
||||||
|
|
||||||
const selectedShorts = [...sameCategoryShorts, ...otherShorts].slice(0, 3);
|
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 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 => {
|
selectedShorts.forEach(short => {
|
||||||
const shortElement = document.createElement('div');
|
const shortElement = document.createElement('div');
|
||||||
|
|||||||
@@ -648,52 +648,39 @@
|
|||||||
],
|
],
|
||||||
"comments": [
|
"comments": [
|
||||||
{
|
{
|
||||||
"author": "AnimeFan123",
|
"author": "なかしーゆう",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "2 hours ago",
|
"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",
|
"author": "okuto0IXX",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "5 hours ago",
|
"time": "5 hours ago",
|
||||||
"content": "I've been listening to this on repeat for days. Can't get enough of it!"
|
"content": "この歌を聞いてからアニメを見たのですが、アニメを見た後に再びこの歌を聞くとまた違う良さに気づく事が出来ました"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"author": "TechEnthusiast",
|
"author": "user-im7jt4ts7i",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "1 day ago",
|
"time": "1 day ago",
|
||||||
"content": "Great explanation! Really helped me understand this topic better."
|
"content": "OPもEDもストーリーもいいし本当に2期きてほしい!"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"author": "GamerPro99",
|
"author": "visitor-zx3sj",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "2 days ago",
|
"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",
|
"author": "ArtFanatic",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "3 days ago",
|
"time": "3 days ago",
|
||||||
"content": "The animation style is so unique and beautiful. Love it!"
|
"content": "The animation style is so unique and beautiful. Love it!"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"author": "SubscriberOne",
|
"author": "Shiki0828",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "4 days ago",
|
"time": "4 days ago",
|
||||||
"content": "First! Been waiting for this video for so long!"
|
"content": "Underrated Japanese Singer"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"author": "CasualViewer",
|
"author": "kurage_mizukurage",
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "5 days ago",
|
"time": "5 days ago",
|
||||||
"content": "Just stumbled upon this channel and I'm already in love with the content!"
|
"content": "久しぶりに聴いたけど神曲。転すらの曲は全部神曲"
|
||||||
},
|
|
||||||
{
|
|
||||||
"author": "CommentMaster",
|
|
||||||
"avatar": "img/avatar/default.jpg",
|
|
||||||
"time": "1 week ago",
|
|
||||||
"content": "This deserves way more views! Sharing with all my friends!"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -169,7 +169,7 @@
|
|||||||
<div class="video-main-section">
|
<div class="video-main-section">
|
||||||
<!-- Video Player -->
|
<!-- Video Player -->
|
||||||
<div class="video-player">
|
<div class="video-player">
|
||||||
<video src="src/video.mp4" controls></video>
|
<video src="src/video.mp4" controls autoplay></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Video Info -->
|
<!-- Video Info -->
|
||||||
|
|||||||
Reference in New Issue
Block a user