我想在 vue.js 中使用 video.js 为视频添加字幕。文本轨道的 HTML 符号如下所示:
<video>
<source src="myVideo.webm" type="video/webm">
<track kind="captions" src="myCaptions.vtt" srclang="en" label="English" default>
</video>
现在,对于 Vue 实现,我遵循了 VideoJS 文档(https://docs.videojs.com/tutorial-vue.html)。有一个组件 VideoJS,它从其父级接收选项。
父组件:
<template>
<div>
<video-player :options="videoOptions"/>
</div>
</template>
[...]
videoOptions: {
autoplay: false,
controls: true,
sources: [
{
src: require("myVideo.mp4"),
type: "video/mp4",
},
],
},
现在,如何添加曲目信息?我尝试了一个额外的“tracks”数组,不幸的是没有成功:
videoOptions: {
sources: [... same as above ...],
tracks: [
{
kind: "captions",
src: require("myCaptions.vtt"),
srclang: "de",
label: "german",
},
],
},
在 videoJS 组件中,我尝试检查是否收到了曲目。我可以在选项对象中看到它,但仍然没有显示标题。
mounted() {
this.player = videojs(
this.$refs.videoPlayer,
this.options,
function onPlayerReady() {
console.log("onPlayerReady", this);
},
);
var tracks = this.player.textTracks();
console.log(tracks); // returns "[object Object]"
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
if (track.kind === "captions") {
console.log(track.src); // Never called
track.mode = "showing";
}
}
}
我究竟做错了什么?