text track no showing
Eeel-12 opened this issue · comments
Hello,
I can't figure out how to show subtitle vtt text track.
my mpd file created with MP4Box/GPAC 2.0:
<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 2.0-revrelease at 2022-04-05T11:18:10.178Z -->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT1H49M49.589S" maxSubsegmentDuration="PT0H0M19.562S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
<ProgramInformation moreInformationURL="http://gpac.io">
<Title>test.mpd generated by GPAC</Title>
</ProgramInformation>
<Period duration="PT1H49M49.589S">
<AdaptationSet segmentAlignment="true" maxWidth="1280" maxHeight="720" maxFrameRate="24000/1001" par="16:9" lang="und" startWithSAP="1" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="video" mimeType="video/mp4" codecs="avc1.64001F" width="1280" height="720" frameRate="24000/1001" sar="27:26" bandwidth="2438428">
<BaseURL>test_track1__dashinit.mp4</BaseURL>
<SegmentBase indexRangeExact="true" indexRange="1787-9726">
<Initialization range="0-990"/>
</SegmentBase>
</Representation>
</AdaptationSet>
<AdaptationSet segmentAlignment="true" lang="fra" startWithSAP="1" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="fre" mimeType="audio/mp4" codecs="mp4a.40.2" audioSamplingRate="48000" bandwidth="160690">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
<BaseURL>test_track2__dashinit.mp4</BaseURL>
<SegmentBase indexRangeExact="true" indexRange="1766-9705">
<Initialization range="0-969"/>
</SegmentBase>
</Representation>
</AdaptationSet>
<AdaptationSet segmentAlignment="true" lang="eng" startWithSAP="1" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="eng" mimeType="audio/mp4" codecs="mp4a.40.2" audioSamplingRate="48000" bandwidth="160751">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
<BaseURL>test_track3__dashinit.mp4</BaseURL>
<SegmentBase indexRangeExact="true" indexRange="1766-9705">
<Initialization range="0-969"/>
</SegmentBase>
</Representation>
</AdaptationSet>
<AdaptationSet segmentAlignment="true" lang="fra" startWithSAP="1" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="fr_full" mimeType="application/mp4" codecs="wvtt" bandwidth="125">
<BaseURL>test_track6__dashinit.mp4</BaseURL>
<SegmentBase indexRangeExact="true" indexRange="1596-9535">
<Initialization range="0-799"/>
</SegmentBase>
</Representation>
</AdaptationSet>
</Period>
</MPD>
GPAC commands:
MP4Box -srt 5 test.mp4
MP4Box -add test_5_text.srt:FMT=VTT:lang=fr test.mp4
MP4Box -dash 10000 -profile onDemand test.mp4#trackID=1:id=video test.mp4#trackID=2:id=fre test.mp4#trackID=3:id=eng test.mp4#trackID=6:id=fr_full -out test.mpd
Html / javascript code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rx-player/3.27.0/rx-player.js" integrity="sha512-uox/gHM6TGSkvsJg3A69nrEJ6zwOAELmV1DfcBhSubEcezqWtIk4B3bsATpwoRLgqtJHsCfaGzEKiHszxtbCog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// import RxPlayer from "rx-player";
// take the first video element on the page
const videoElement = document.querySelector("video");
const player = new RxPlayer({ videoElement });
player.addEventListener("error", (err) => {
console.log("the content stopped with the following error", err);
});
player.addEventListener("playerStateChange", (state) => {
console.log('state: '+state);
console.log('audio track:', player.getAvailableAudioTracks());
player.setAudioTrack('audio-eng');
console.log('text tracks:', player.getAvailableTextTracks());
player.setTextTrack('text-fra');
console.log('current text:', player.getTextTrack());
if (state === "LOADED") {
console.log("the content is loaded");
// toggle between play and pause when the user clicks on the video
videoElement.onclick = function () {
if (player.getPlayerState() === "PLAYING") {
player.pause();
} else {
player.play();
}
};
}
});
// player.addEventListener("textTrackChange", (state) => {
// console.log('textTrackChange event detected:', state);
// });
player.loadVideo({
url:"url_to_my_local/test.mpd",
transport: "dash",
autoPlay: true,
});
});
</script>
<video preload="auto" controls autoplay></video>
Chrome console output:
state: PLAYING
test:447 audio track:
(2) [{…}, {…}]
0: {language: 'fra', normalized: 'fra', audioDescription: false, id: 'audio-fra', active: false, …}
1: {language: 'eng', normalized: 'eng', audioDescription: false, id: 'audio-eng', active: true, …}
length: 2
[[Prototype]]: Array(0)
test:450 text tracks:
[{…}]
0: {language: 'fra', normalized: 'fra', closedCaption: false, id: 'text-fra', active: true}
length: 1
[[Prototype]]: Array(0)
test:452 current text:
{language: 'fra', normalized: 'fra', closedCaption: false, id: 'text-fra'}
closedCaption: false
id: "text-fra"
language: "fra"
normalized: "fra"
[[Prototype]]: Object
The file play fine i'm able to change the audio track with player.setAudioTrack('audio-eng'); but text track don't show at all.
In Chrome network TAB i can see the test_track6__dashinit.mp4 file being read but very few times, around 3 occurences of this track appear there. Video and audio xhr requests appear constantly.
Can anyone point me what i'm missing please ? I'm able to play the same file with dash.js, audio video and text track works fine, caption and audio buttons are shown with ControlBar.js
Another question how can i get the player buttons for caption and audio track selection to appear like in the demo ?
Any feedback appreciated. Note that i'm not an expert in the subject of DASH streaming.
p.s: What i'm trying to achieve is play splited mp4 file with one video track two or more audio tracks, and multiple subtitles(fr full and fr forced and eng full and eng forced).
Hi,
Can anyone point me what i'm missing please ?
It's difficult to say what is happening here.
Can you show debug logs of the first few seconds of playbacks (can be enabled by doing RxPlayer.LogLevel = "DEBUG")? It will at least indicate why only 3 requests are linked to subtitles yet much more of them are linked to audio and video (which could also be a normal occurrence, for example due to lengthier text segments).
Another question how can i get the player buttons for caption and audio track selection to appear like in the demo ?
I'm not sure that I understand what you mean, as you already understood how to get the different available audio and text tracks.
If you mean how to display the exact same buttons, you will have to re-create them in your page sadly, as the RxPlayer does not provide a UI.
It is only the core parts of the player (allowing to play a content, changing tracks and qualities, content decryption...), which will need to be integrated in an application that will provide the user interface itself.
The demo is just an example implementation, to show how the RxPlayer works and what it can do, but it is not importable.
We thought about providing a default UI, but it necessitates a lot of work and most applications already define their own interface anyway, so for now we prefer to focus on core library features.
@peaBerberian thanks for your feedback, my apologies i missed the notification email. I'll will follow your advices as soon as possible and give the results here.