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);
|
||||
|
||||
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');
|
||||
|
||||
Reference in New Issue
Block a user