I’m encountering an issue in my React.js TypeScript project where subtitles are not displaying in Video.js. The setup involves using Azure Media Services for streaming and DRM for encryption. Despite successful video playback and multiple audio streams, the subtitles are not showing. Our code utilizes the this.player.textTracks() function, but it returns no TextTracks.
Notably, the same setup works seamlessly with Shaka Player, and subtitles are visible. It also functions correctly in React Native, but the player used there is not supported for the web.
Can you provide insights or guidance on why subtitles might not be appearing in Video.js and how to address this issue?
1 Like
I recognize the difficulty you’re having. Let’s start debugging by looking at how Video.js, Azure Media Services, and the DRM configuration work together. First, make sure that your Azure Media file has the subtitles integrated appropriately and that the playback is applying the required parameters. It is imperative to make certain that the information has subtitles.
Check if this.player is after that. The Azure Media DRM-protected content is communicating with the textTracks() method successfully. If it’s not returning any TextTracks, there may be problems with Video.js and Azure Media DRM integration or compatibility.
Inspect the network tabs in the developer tools and the browser’s console for more
information. Check for any unsuccessful requests or error messages about the retrieval of subtitles. This could provide additional light on the reasons why subtitles are not being picked up.
Please submit any specific information or error messages so that we can carry out more troubleshooting.
I’ve verified that the Azure Media asset has subtitles embedded successfully. Nevertheless, no TextTracks are still returned by this.player.textTracks() function. There are no visible subtitle-related error warnings in the browser’s console. Is there a chance that there is a conflict between Video.js and Azure Media DRM?
In the event that this.player.textTracks() returns no TextTracks, there may be a conflict or a setup that has to be done in order for Video.js and Azure Media DRM to function properly.
In order to make sure that no special considerations or extra configurations are required for integrating with DRM-protected video, let’s examine the Video.js documentation. Furthermore, look for any Video.js fixes or updates that might fix compatibility problems.
I looked through community forums and saw conversations that were similar. Other people seem to have experienced difficulties with Azure Media DRM and Video.js subtitles. There isn’t a certain consensus, however, some people provide possible solutions.
Based on comparable circumstances, are there any standard solutions or best practices that you would suggest?
Diverse answers are frequently offered in community discussions, so it’s excellent that you’ve found instances when these alternatives apply. There may not be a single answer that works for everyone, but you can think about the following:
Updates for compatibility: Make sure the Azure Media DRM and Video.js libraries are up to date. Updates occasionally offer enhancements to compatibility.
Other Strategies: Investigate different strategies for adding subtitles. It’s possible that certain developers have had success with particular setups or non-conventional ways.
Direct Support Channels: Get in touch with Video.js and Azure Media Services directly through their support channels. They could offer particular advice or updates on current problems with DRM integration and subtitles.