无法为 mp4 视频呈现带有 Video.JS 的嵌入式字幕
Not able to render embedded subtitles with Video.JS for mp4 video
我无法在 video.js 中为嵌入了字幕流的 mp4 文件呈现字幕。
如果我是 运行 FFProbe /filePath
我可以确认 mp4 视频有字幕。
我在前端使用 Angular,这就是我设置 videoJs 播放器的方式
const videoJsConfig = {
controls: true,
autoplay: false,
preload: 'auto',
fluid: true,
height: 600,
width: 800,
textTrackSettings: true
// html5: {
// nativeTextTracks: false
// }
};
this.player = videojs('preview-player', videoJsConfig);
对于前端,我只是展示这个:
<section class="main-preview-player">
<video id="preview-player" class="video-js" crossorigin="anonymous">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
<track kind="subtitles" src="//subrip" srclang="en" label="English" default>
</video>
<div class="lds-ring" *ngIf="isVideoLoading"><div></div><div></div><div></div><div></div></div>
<div class="watermark" *ngIf="auditId"></div>
</section>
对于加载部分,一些简单的事情,从用户的选择中获取 mp4 文件 blob。
const objectURL = URL.createObjectURL(file as Blob);
const mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(objectURL);
console.log('mediaSrc', mediaSrc);
this.player.src([
{ type: 'video/mp4', src: objectURL },
]);
track 元素已添加用于测试,因为 FFProbe 已向我显示了上层信息,我认为也许我可以强制执行它。
我已经阅读了他们的文档,但他们没有提供太多关于他们认为 'native subtitles' 或 'emulated subtiles' 的信息,所以我尝试摆弄它,希望它能起作用。
对于这种情况,我唯一的 'fix' 是在后端级别使用 FFMpeg,提取 .srt 文件,将其发送到 frondend,然后以编程方式将 srt 文件附加到视频标签本身(轨道元素),但是必须是一个更人性化的选择
或者寻找更好的视频库。在线
嵌入式字幕轨道取决于浏览器的本机支持,这不是很普遍。 Safari 在 MP4 中支持 mov_text,仅此而已。
Safari 不会播放 ffmpeg 输出中的文件,因为它是一个 matroska (mkv) 容器。 Chrome 经常播放重命名为 mp4 的 mkv) 但不支持内嵌字幕。
我无法在 video.js 中为嵌入了字幕流的 mp4 文件呈现字幕。
如果我是 运行 FFProbe /filePath
我可以确认 mp4 视频有字幕。
我在前端使用 Angular,这就是我设置 videoJs 播放器的方式
const videoJsConfig = {
controls: true,
autoplay: false,
preload: 'auto',
fluid: true,
height: 600,
width: 800,
textTrackSettings: true
// html5: {
// nativeTextTracks: false
// }
};
this.player = videojs('preview-player', videoJsConfig);
对于前端,我只是展示这个:
<section class="main-preview-player">
<video id="preview-player" class="video-js" crossorigin="anonymous">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
<track kind="subtitles" src="//subrip" srclang="en" label="English" default>
</video>
<div class="lds-ring" *ngIf="isVideoLoading"><div></div><div></div><div></div><div></div></div>
<div class="watermark" *ngIf="auditId"></div>
</section>
对于加载部分,一些简单的事情,从用户的选择中获取 mp4 文件 blob。
const objectURL = URL.createObjectURL(file as Blob);
const mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(objectURL);
console.log('mediaSrc', mediaSrc);
this.player.src([
{ type: 'video/mp4', src: objectURL },
]);
track 元素已添加用于测试,因为 FFProbe 已向我显示了上层信息,我认为也许我可以强制执行它。
我已经阅读了他们的文档,但他们没有提供太多关于他们认为 'native subtitles' 或 'emulated subtiles' 的信息,所以我尝试摆弄它,希望它能起作用。
对于这种情况,我唯一的 'fix' 是在后端级别使用 FFMpeg,提取 .srt 文件,将其发送到 frondend,然后以编程方式将 srt 文件附加到视频标签本身(轨道元素),但是必须是一个更人性化的选择
或者寻找更好的视频库。在线
嵌入式字幕轨道取决于浏览器的本机支持,这不是很普遍。 Safari 在 MP4 中支持 mov_text,仅此而已。
Safari 不会播放 ffmpeg 输出中的文件,因为它是一个 matroska (mkv) 容器。 Chrome 经常播放重命名为 mp4 的 mkv) 但不支持内嵌字幕。