请求协助：Azure Media Player(AMP)播放列表功能实现方案问询

Hey there! I’ve worked with Azure Media Player (AMP) on several projects, so I can walk you through solid workarounds to build a playlist for your school’s 20 subtitled videos—even though AMP doesn’t have a native playlist feature. Here are the most practical approaches:

This is the most straightforward and flexible method, since you have full control over the player behavior and UI. Here’s how to implement it:

Step 1: Define Your Playlist Data #

First, create an array that stores all your video details (stream URL, subtitle URL, title, etc.). This makes it easy to iterate through videos:

const schoolPlaylist = [
  {
    streamUrl: "https://your-school-media.azureedge.net/video1/index.m3u8",
    subtitleUrl: "https://your-school-site.com/subtitles/video1-en.vtt",
    title: "New Student Orientation Part 1"
  },
  {
    streamUrl: "https://your-school-media.azureedge.net/video2/index.m3u8",
    subtitleUrl: "https://your-school-site.com/subtitles/video2-en.vtt",
    title: "Campus Accessibility Tour"
  },
  // Add the remaining 18 videos here
];

Step 2: Initialize AMP and Playlist Logic #

Set up the AMP instance, then write functions to load videos, switch between them, and handle autoplay after a video ends. This example includes subtitle management to meet your accessibility requirements:

let currentVideoIndex = 0;
// Initialize the AMP player
const player = amp('azuremediaplayer', {
  nativeControlsForTouch: false,
  controls: true,
  autoplay: false,
  width: "100%",
  height: "auto",
  poster: ""
});

// Load a video and its subtitles
function loadVideo(index) {
  if (index < 0 || index >= schoolPlaylist.length) return;
  
  const activeVideo = schoolPlaylist[index];
  // Update the video source
  player.src([{
    src: activeVideo.streamUrl,
    type: "application/vnd.apple.mpegurl" // Adjust based on your video format (HLS/DASH)
  }]);
  
  // Clear existing subtitles and add the new one
  player.textTracks().forEach(track => {
    if (track.kind === 'subtitles') player.removeRemoteTextTrack(track);
  });
  
  player.addRemoteTextTrack({
    kind: 'subtitles',
    label: 'English',
    srclang: 'en',
    src: activeVideo.subtitleUrl,
    mode: 'showing' // Ensure subtitles are enabled by default for compliance
  });
  
  // Update playlist UI to highlight the active video
  document.querySelectorAll('.playlist-item').forEach((item, i) => {
    item.classList.toggle('active', i === index);
  });
  
  currentVideoIndex = index;
}

// Auto-play next video when current one ends
player.addEventListener('ended', () => {
  loadVideo(currentVideoIndex + 1);
});

// Load the first video on page load
loadVideo(0);

Step 3: Add a Clickable Playlist UI #

Create a simple HTML list for users to manually select videos, and wire up click events:

<div class="video-container">
  <div id="azuremediaplayer" class="azuremediaplayer amp-default-skin"></div>
  <div class="playlist-menu">
    <h3>Video Playlist</h3>
    <div class="playlist-item active">New Student Orientation Part 1</div>
    <div class="playlist-item">Campus Accessibility Tour</div>
    <!-- Add the rest of your video titles here -->
  </div>
</div>

<script>
// Add click handlers for playlist items
document.querySelectorAll('.playlist-item').forEach((item, index) => {
  item.addEventListener('click', () => {
    loadVideo(index);
    player.play();
  });
});
</script>

If all your videos are hosted in Azure Media Services, you can create a SMIL manifest that sequences your videos into a single playlist stream. AMP can load this manifest directly, and it will play through the videos sequentially. Note that this method gives you less control over custom UI, but it’s a good option if you want to manage the playlist server-side:

• Create a SMIL file that lists all your video assets in order
• Use Azure Media Services to package this manifest into a streamable format (HLS/DASH)
• Load the manifest URL directly into AMP, and it will auto-play through the sequence

Since you’re required to meet new accessibility regulations, make sure to:

• Ensure your playlist UI is keyboard-navigable (add tabindex and focus states)
• Keep subtitles enabled by default (as shown in the JS example)
• Add descriptive text for playlist items (for screen readers)

内容的提问来源于stack exchange，提问作者Noah O'Toole