寻找支持画中画的HTML5视频播放器及VideoJS实现方法

Hey there! Let me help you out with this. First, let's cover potential players you might be thinking of, then walk through how to build that dual-video/PiP setup with Video.js.

Since you mentioned a player optimized for lecture-style content with multi-video support and layout switching, these are strong candidates to check:

• MediaElement.js: This player has extensions for multi-video layouts and native PiP support, commonly used for educational content combining presentation recordings and speaker feeds.
• Flowplayer: Offers customizable multi-video embedding, built-in layout switching, and works seamlessly with modern browser PiP functionality via plugins.
• plyr.io: A lightweight option with native PiP support that can be easily styled to display multiple videos in PiP or side-by-side layouts.
• Kaltura Player: Enterprise-grade, purpose-built for educational and corporate content with out-of-the-box dual-video (presentation + presenter) configurations.

Video.js doesn’t have native multi-video support, but you can build this setup with core Video.js instances, custom CSS, and browser PiP APIs. Here’s a step-by-step guide:

Step 1: Set Up the HTML Structure #

Create separate Video.js players for your main (PPT) video and secondary (presenter) video:

<div class="video-wrapper">
  <video id="main-ppt-video" class="video-js vjs-big-play-centered" controls preload="auto" width="800" height="450">
    <source src="your-ppt-video.mp4" type="video/mp4">
  </video>
  <video id="presenter-video" class="video-js vjs-big-play-centered" controls preload="auto" width="200" height="112">
    <source src="your-presenter-video.mp4" type="video/mp4">
  </video>
</div>

Step 2: Add Custom CSS for Layouts #

Style the container to position the presenter video as an overlay (PiP style), and add a class for switching to a side-by-side layout:

.video-wrapper {
  position: relative;
  width: 800px;
  margin: 2rem auto;
}

#presenter-video {
  position: absolute;
  bottom: 20px;
  right: 20px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  z-index: 10;
}

/* Side-by-side layout toggle */
.video-wrapper.side-by-side {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.video-wrapper.side-by-side #presenter-video {
  position: static;
  width: 300px;
  height: auto;
}

Step 3: Initialize Players and Add Interactive Features #

Use JavaScript to sync playback, add layout switching, and enable PiP functionality:

// Initialize Video.js players
const mainPlayer = videojs('main-ppt-video');
const presenterPlayer = videojs('presenter-video');

// Optional: Sync playback between both videos
mainPlayer.on('play', () => presenterPlayer.play());
mainPlayer.on('pause', () => presenterPlayer.pause());
mainPlayer.on('seeked', () => {
  presenterPlayer.currentTime(mainPlayer.currentTime());
});

// Add layout switch button
const layoutBtn = document.createElement('button');
layoutBtn.textContent = 'Switch to Side-by-Side';
layoutBtn.className = 'vjs-control vjs-button';
document.querySelector('.video-wrapper').prepend(layoutBtn);

layoutBtn.addEventListener('click', () => {
  const wrapper = document.querySelector('.video-wrapper');
  wrapper.classList.toggle('side-by-side');
  layoutBtn.textContent = wrapper.classList.contains('side-by-side') 
    ? 'Switch to PiP' 
    : 'Switch to Side-by-Side';
});

// Add native PiP toggle for presenter video
const pipBtn = document.createElement('button');
pipBtn.textContent = 'Toggle Presenter PiP';
pipBtn.className = 'vjs-control vjs-button';
document.querySelector('.video-wrapper').prepend(pipBtn);

pipBtn.addEventListener('click', async () => {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await presenterPlayer.requestPictureInPicture();
    }
  } catch (err) {
    console.error('PiP toggle failed:', err);
  }
});

Optional: Use Video.js PiP Plugin #

For a more integrated experience, use the official videojs-pip plugin:

1. Include the plugin’s script and CSS in your project
2. Initialize the presenter player with PiP enabled:

const presenterPlayer = videojs('presenter-video', {
  plugins: {
    pip: {
      // Customize plugin behavior here (e.g., default PiP size)
    }
  }
});

内容的提问来源于stack exchange，提问作者kn03i