Member Avatar for satimis

Hi all,

How to make video rotate on webpage screen?

E.G, say:
video-1, video-2, video-3, video-4, video-5 ..... up to video-10. Each time I expect only 2 video displayed on screen,

say;
1st screen
video-1, video-2,
next screen
video-2, video-3,
next screen
video-3, video-4
etc.

The video will stay on screen for xseconds. If without clicking the play-button to start playing the video the screen will move to the right displaying next screen.

Suggestions and pointers would be appreciated. TIA

  • 3 Contributors
  • 2 Replies
  • 96 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by techbrain

Dani AI

Generated

A practical way to implement the rotating pair behavior requested by is a tiny carousel that shows two video elements at once, advances by one index on a timer, and only advances when neither visible video is being played. That keeps the UI predictable for users and avoids cutting off playback. and were on the right track: group the list into sliding windows of two, but handle timing and playback state explicitly rather than simple static pagination.

Example switching logic (core ideas you can drop into your page):

const videos = Array.from(document.querySelectorAll('.rotator video'));
let i = 0;
let timer = null;
const DELAY = 5000; // milliseconds

function showPair(idx) {
  videos.forEach((v, n) => v.parentElement.classList.toggle('visible', n === idx || n === (idx + 1) % videos.length));
}

function isPlaying(v) {
  return !!(v.currentTime > 0 && !v.paused && !v.ended && v.readyState > 2);
}

function anyPlayingPair(idx) {
  return isPlaying(videos[idx]) || isPlaying(videos[(idx + 1) % videos.length]);
}

function schedule() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    if (!anyPlayingPair(i)) {
      i = (i + 1) % videos.length;
      showPair(i);
    }
    schedule();
  }, DELAY);
}

videos.forEach(v => {
  v.addEventListener('play', () => clearTimeout(timer));
  ['pause', 'ended'].forEach(ev => v.addEventListener(ev, schedule));
});

showPair(i);
schedule();

Notes and troubleshooting:

  • Mobile browsers block autoplay with sound. Do not rely on programmatic play() unless videos are muted or user-initiated. See the HTML video docs for details: HTML <video> element.
  • Lazy-load actual src only for the current and next pair (use data-src and set src just before showing) to save bandwidth.
  • Add pause-on-hover/focus and keyboard left/right controls for accessibility.
  • If the carousel still advances while a video is playing, verify your isPlaying check uses paused, ended, and readyState as shown and that event listeners reset the timer correctly.

Recommended Answers

All 2 Replies

Member Avatar for bestwsd

You can create if else loop & design your webpage as per your need.

Member Avatar for techbrain

You can use pagignation and provide video size = 2 and after decided time interval page will move and next 2 video will display.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.