字幕不显示在 videojs
我在我们的 react.js 和 typescript 项目中使用 video.js。 对于流媒体，我们使用 Azure 媒体服务和 DRM 进行加密。 视频播放完美，多个音频也播放正常，但我们面临的问题是字幕未显示。 这是我们正在使用的代码，但在 this.player.textTracks() 函数中没有给出 TextTracks。 它与 shaka 播放器一起工作正常，字幕也显示它在本机反应中工作正常，但播放器不同，网络不支持。
import videojs from 'video.js';
import '@videojs/http-streaming';
import "videojs-contrib-eme";
import HlsParser from 'hls-parser';
componentDidMount() {
this.player = this.initializePlayer();
// set eme plugin
this.player.eme();
// add video resources streaming url etc
this.setVideoReaource();
this.fetchSubtitles();
}
initializePlayer = () => {
return videojs("video", {
enableSourceset: true,
preload: "auto",
fluid: true,
aspectRatio: '16:9',
controls: true,
autoplay: true,
controlBar: {
pictureInPictureToggle: false,
remainingTimeDisplay: false,
fullscreenToggle: true,
volumePanel: {
inline: false
},
},
html5: {
nativeTextTracks: true
}
});
}
setVideoReaource = () => {
this.player.src({
src: `https://vodemedia-usea.streaming.media.azure.net/4ac3e64a-aa82-460d-a7f5-06632522aae2/The Bad Guys_2022 New Eng and Ar.ism/manifest(format=m3u8-cmaf,encryption=cenc)`,
type: 'application/x-mpegURL',
keySystems: {
'com.widevine.alpha': this.widevineLicenseURI,
'com.microsoft.playready': true
},
});
}
fetchSubtitles() {
const subtitles = this.player.textTracks();
console.log('subtitles');
console.log(subtitles);
for (const element of subtitles) {
const subtitle = element;
if (subtitle.src) {
this.player.addRemoteTextTrack({
kind: 'subtitles',
src: subtitle.src,
srclang: subtitle.language,
label: subtitle.label,
default: true
});
}
}
}
render() {
return(
<div>
<video
height="480"
id="video"
className={`video-js vjs-default-skin vjs-fill vjs-custom-theme`}
controls
data-setup="{}">
</video>
</div>
}
注意：- 我们也尝试使用此代码从清单 url 中获取字幕，但我们没有在 manifestObject 中获取任何播放列表。
fetch(`https://vodemedia-usea.streaming.media.azure.net/4ac3e64a-aa82-460d-a7f5-06632522aae2/The Bad Guys_2022 New Eng and Ar.ism/manifest(format=m3u8-cmaf,encryption=cenc)`)
.then(response => response.text())
.then(manifest => {
console.log(manifest);
const manifestObject = HlsParser.parse(manifest);
console.log('manifestObject');
console.log(manifestObject);
const subtitlePlaylist = manifestObject.playlists.find(playlist => playlist.attributes && playlist.attributes.SUBTITLES);
const subtitleTrack = subtitlePlaylist && subtitlePlaylist.mediaGroups.SUBTITLES.en.find(track => track.default);
console.log('subtitlePlaylist');
console.log(subtitlePlaylist);
this.player.addRemoteTextTrack({
kind: 'subtitles',
src: subtitleTrack.uri,
srclang: subtitleTrack.language,
label: 'English'
});
})
.catch(error => {
console.error(error);
});
如果有人对此有解决方案，请帮助我。如果想一对一联系，请告诉我我们可以联系。
根据提供的代码和描述，您似乎面临一个问题，即在 React.js 和 TypeScript 项目中使用 video.js 构建的视频播放器中没有显示字幕，同时使用 DRM 加密从 Azure 媒体服务流式传输视频。
这里是问题的逐步概述：
在 componentDidMount() 生命周期方法中，您正在使用 this.initializePlayer() 初始化视频播放器，它使用各种配置设置 video.js 播放器，例如预加载、流体模式、宽高比、控件、自动播放和 HTML5 原生文本轨道。
您正在使用 this.setVideoResource() 设置视频源，它将视频源设置为来自 Azure 媒体服务的 URL，具有 HLS 格式和 Widevine 和 PlayReady 的加密密钥系统。
您正在使用 this.fetchSubtitles() 获取字幕，您正在调用 this.player.textTracks() 从视频播放器获取可用的文本轨道。但是，您遇到了一个问题，即 this.player.textTracks() 没有返回 TextTracks，并且播放器中没有显示字幕。
此外，您还尝试使用 fetch() 和 HlsParser 从 hls-parser 库中直接从清单 URL 获取字幕，但您没有在 manifestObject 中获得任何播放列表。
总的来说，这个问题似乎与未从 video.js 播放器或 HLS 清单中正确检测或加载字幕有关，并且未在播放器界面中显示。
要解决此问题，您可能需要彻底检查与 video.js 和 Azure 媒体服务中的文本轨道和字幕相关的代码和配置。一些潜在的调查领域可能包括：
确保从 Azure 媒体服务流式传输的视频文件具有正确嵌入的字幕轨道或与其关联的单独字幕文件。
验证 video.js 播放器中的文本轨道和字幕是否正确配置，包括在 html5 配置中使用 nativeTextTracks 选项，以及正确使用 this.player.textTracks()检索可用文本轨道的功能。
仔细检查 Azure 媒体服务中的清单格式和加密设置，并确认清单中正确包含和引用了字幕。
在浏览器控制台或服务器端日志中查看与文本轨道或字幕相关的任何错误消息或日志，以寻找有关该问题的任何线索。
如果您在查看代码和配置并进行故障排除后仍然遇到问题，从 video.js 社区、Azure 媒体服务支持或具有 video.js、Azure 媒体服务专业知识的合格开发人员寻求进一步的帮助可能会有所帮助, 和 DRM 加密。