Skip to main content

流选择

一些容器如 .m3u8(将来可能还有 .mpd)支持多个等效的流,你应该从中选择一个。例如,一个 .m3u8 文件可能包含多个不同分辨率的视频流。

🌐 Some containers such as .m3u8 (and in the future .mpd) support multiple equivalent streams, of which you are supposed to select one.
For example, a .m3u8 file might contain multiple video streams with different resolutions.

选择一个 M3U 流

🌐 Selecting a M3U stream

使用 selectM3uStream 选项来选择一个流。

🌐 Use the selectM3uStream option to select a stream.

import {parseMedia} from '@remotion/media-parser';

const media = await parseMedia({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  selectM3uStream: ({streams}) => {
    for (const stream of streams) {
      console.log(stream.dimensions); // {width: 1920, height: 1080}
      console.log(stream.bandwidthInBitsPerSec); // 4400000
      console.log(stream.src); // "https://test-streams.mux.dev/x36xhzz/193039199_mp4_h264_aac_hd_7.m3u8"
      console.log(stream.averageBandwidthInBitsPerSec); // null
      console.log(stream.codecs); // ["avc1.640028", "mp4a.40.2"]
      console.log(stream.associatedPlaylists); // See below
    }

    return streams[0].id;
  },
});

你必须返回你想要选择的流的 id
默认情况下,将选择分辨率最高的流(按宽度乘以高度排序)。

🌐 You must return the id of the stream you want to select.
By default, the stream with the highest resolution is selected (sorted by width multiplied by height).

显示流选择界面

🌐 Show a stream selection interface

如果你希望终端用户选择质量,建议使用两次传输。你可以在第一次传输中提取流,然后向用户显示一个界面以选择质量。

🌐 If you want an end user to pick the quality, it is recommended that you use two passes.
You can extract the streams in the first pass and then show a UI to the user to pick the quality.

import {parseMedia} from '@remotion/media-parser';

const {m3uStreams} = await parseMedia({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  fields: {
    m3uStreams: true,
  },
});

诉诸默认行为

🌐 Resorting to default behavior

如果你想使用默认行为(选择分辨率最高的流),请使用 defaultSelectM3uStreamFn 函数。

🌐 If you want to resort to the default behavior (selecting the stream with the highest resolution), use the defaultSelectM3uStreamFn function.

import {parseMedia, defaultSelectM3uStreamFn} from '@remotion/media-parser';

const media = await parseMedia({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  selectM3uStream: (params) => {
    // Add custom logic

    // ...

    // Resort to default behavior
    return defaultSelectM3uStreamFn(params);
  },
});

选择音频轨道

🌐 Selecting an audio track

一旦选择了主流,可能会调用另一个回调,允许你选择主流的“关联播放列表”。

🌐 Once a primary stream has been selected, another callback may get invoked allowing you to pick "associated playlists" of the primary stream.

相关的播放列表是音频轨道,但将来它也可能是字幕轨道。

🌐 An associated playlist is an audio track, but it could in the future also be a subtitle track.

Selecting the first stream
import {parseMedia} from '@remotion/media-parser'; await parseMedia({ src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', selectM3uAssociatedPlaylists: ({associatedPlaylists}) => { return associatedPlaylists.filter((playlist) => { // Information relayed from the .m3u8: console.log(playlist.groupId); // string console.log(playlist.language); // string | null console.log(playlist.name); // string | null console.log(playlist.autoselect); // boolean console.log(playlist.default); // boolean console.log(playlist.channels); // number | null console.log(playlist.src); // string return playlist.default; }); }, });

默认行为是如果只有一个关联的播放列表,则选择该播放列表;否则选择所有具有 default: true 属性的关联播放列表。该行为由过滤函数 defaultSelectM3uAssociatedPlaylists 实现。

🌐 The default behavior is to select the single associated playlist if there is only one, and otherwise select all associated playlists with the default: true attribute. The behavior is implemented by the filter function defaultSelectM3uAssociatedPlaylists.

import {parseMedia, defaultSelectM3uAssociatedPlaylists} from '@remotion/media-parser';

const media = await parseMedia({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  selectM3uAssociatedPlaylists: defaultSelectM3uAssociatedPlaylists,
});

每个 M3uStream 都有一个字段 stream.associatedPlaylists,列出相关的音轨,这对于显示用于选择音轨的用户界面很有用。

🌐 Each M3uStream has a field stream.associatedPlaylists listing the associated audio tracks, which is useful for showing a UI for selecting the audio track.

另请参阅

🌐 See also