Skip to main content

Multiple captions and responsiveness

Edward Huang

For the video player, I noticed that I defined only one English caption for each video in a playlist but noticed that two captions are shown in the options like below for only the first video that is shown (whatever episode number that may be):

 

I tried playing with the code and found that if I do not include the line of code "vplayer.playlist().currentIndex(episode);", I do not encounter this double caption problem. When I do include the line of code, it does. Is this a bug?

My code is as follows (assume everything is defined like data, vplayer, and playlistOptions):

const playlist = [];

for (let i = 0; i < data.chapter_urls.length; i++) {
playlist.push({
publicId:data.chapter_urls[i],
info: {
title:data.chapter_names[i]
},
poster: {
publicId:data.chapter_thumbnails[i]
},
textTracks: {
captions: {
label:'English (captions)',
language:'en',
default:false,
url:data.chapter_captions[i]
}
}
});

vplayer.playlist(playlist, playlistOptions);
vplayer.playlist().currentIndex(episode);
 
 
Also a separate issue that I wanted to include is responsiveness. In the documentation, the video player is said to be responsive for mobile. But when I change to mobile view, the time and video controls on the right like full screen and captions are cut out. Was wondering if you knew what could be the reason for this?
0

Comments

13 comments

Date Votes
  • Ranson

    Hey Edward, 

    Looking at the snippet you've sent over I can see that you're calling the following method twice.

    vplayer.playlist()

    This is causing the duplicate caption entries to appear as it's running the function two times. 

    You can chain the commands as shown below to prevent this from happening.

    vplayer.playlist(playlist, playlistOptions).currentIndex(episode);

     

    Regarding your question on the responsiveness of the video player, we have tested the functionality on mobile views and verified that the video player is loading properly.
    There were a few cases where the browser would not load the proper resolution for the video player to render in, however, that was confirmed to be a browser emulation related issue. 

    Please let us know if there's any further clarification needed on the above, or if we've missed anything!

    0
  • Edward Huang

    Hey Ranson,

    Thanks for the quick response!

    For the duplicate captions, I actually have tried to chain the commands but it didn't work. Calling vplayer.playlist() was recommended by Piotr in this thread: https://support.cloudinary.com/hc/en-us/community/posts/5815950671634-Playlist-operations-not-recognized-as-functions

    Are there any alternatives to have it working but also not have duplicate captions? Thanks in advance!

    0
  • Ranson

    Hey Edward, 

    Apologies for my earlier misguidance on the vplayer, after looking at this more closely the issue is that the textTracks is being pushed within the for loop. So the English ( Captions ) will be appended to the list as many times as the for loop runs. 

    I would suggest defining the textTracks object outside of the for loop, then modifying the URL key within the for loop if possible so that the English ( Captions ) option isn't pushed multiple times. 


    Would you be able to share what the end goal of this application will be and if possible a working codesandbox example for us to work in? This way we'd be able to make modifications or add snippets on our suggestions.

     

    Thank you,

    Ranson

     

     

    0
  • Edward Huang
    Edited

    Hey Ranson,

    The end goal of our application is to create a playlist where each video (episode) makes up a part of a video series. We also want to allow the user to go to any episode by specifying the episode variable, which is why we are using vplayer.currentIndex(episode). Since we are trying to create a playlist, that is why I'm using a for loop, since I am trying to create a list of video sources with different captions for each video based on data grabbed from the DB. I only have 1 caption for each video though.

    In production, we actually have 8 videos but there are still only 2 English (Captions), so I think the number of captions that shows up on the video player isn't related to how many times the for loop runs.

    I actually found some weird behavior. After creating the playlist with:

    vplayer.playlist(playlist, playlistOptions);

    I noticed that however many times I call

    vplayer.playlist().currentIndex(episode);

    is directly correlated with how many English (Captions) appear in the video player. For example, if I call currentIndex once after creating the playlist, I see 2 captions. If I call currentIndex twice, I see 3 captions.

    I don't think that is the expected behavior and I believe there may be a bug with the code somewhere. I took a look at the source code for the Cloudinary Video Player and my understanding is that near the end of the currentIndex function, this._refreshTextTracks() is called. refreshTextTracks is then triggered. According to the consts.js, REFRESH_TEXT_TRACKS maps to refreshTextTracks. We can see that the trigger is set here, and it calls setTextTracks(). The implementation of setTextTracks() shows that the text tracks should all be removed and then the text tracks of the source at the new index should be added.

    So if that's the case, the expected behavior should be that no matter how many times I call currentIndex() consecutively, I should still see only 1 caption (in my case, since I only have 1 caption for each video). I was wondering if you might be able to look into this? I linked all the connection points in the code so hopefully it won't be too much of a burden.

    Thanks,

    Edward

     

     

     

    0
  • Zachary Gould

    Edward, 

    Would you mind sharing your code so that we can help troubleshoot your specific issue?

    Thanks

    0
  • Edward Huang

    Yea for sure! This is the codesandbox link: https://codesandbox.io/s/condescending-browser-hb17bb?file=/pages/%5Busername%5D.js

    There are some imports in the file that doesn't have to do with Cloudinary at all, so I didn't include all of them since it would make things too complicated and isn't relevant. All the code that has to do with Cloudinary is in the codesandbox. Hopefully this will make things easier.

    Thanks in advance!

    0
  • Zachary Gould

    Hey there Edward, 

    So I haven't had luck replicating your issue. I also didn't find the sandbox you shared super helpful to sort out your specific issue because like you said there is a bunch of extra code that stops the page from displaying. Did you end up finding anything out?

    0
  • Edward Huang

    I didn't find much out, but I was still wondering what the behavior of currentIndex() should be. When I run the following lines of code:

    vplayer.playlist(playlist, playlistOptions);
    vplayer.playlist().currentIndex(episode);

     there are two captions that show up.

    If I run the function twice consecutively like below:

    vplayer.playlist(playlist, playlistOptions);
    vplayer.playlist().currentIndex(episode);
    vplayer.playlist().currentIndex(episode);

     there are three captions show up. Shouldn't that not be the expected behavior? I haven't seen currentIndex() be used in Cloudinary examples so I'm not sure if this is a reproducible issue on your side.

    0
  • Zachary Gould

    Edward what happens when you change 

    vplayer.playlist().currentIndex(episode);
    to 

    vplayer.currentIndex(episode);
    0
  • Edward Huang

    It gives me the following: TypeError: vplayer.currentIndex is not a function

    0
  • Mo Ip

    Hi Edward,

    I'm checking with our Dev team right now regarding these extra captions.  In the meantime, would you submit a Support ticket providing your cloud name so I can further investigate from our log?

    0
  • Edward Huang

    Yep, just submitted the Support ticket! The request ID is 194534.

    Also here is some extra behavior I noticed that I think would help with figuring out a solution. Assume that I have done all the initialization and called 

    vplayer.playlist(playlist, playlistOptions);

    already.

    Interesting Behavior

    1. Multiple captions only appear if I call 

    vplayer.playlist().currentIndex(episode);

    If I don't use the currentIndex function at all, the captions appear correctly.

    2. When I do call 

    vplayer.playlist().currentIndex(episode);

    I will get 2 captions as I have mentioned before. One caption is the caption of the first video in the playlist, while the second one is the correct caption corresponding to the video of the episode index.

    3. I get 2 captions when the video player first loads in the page, but as soon as I switch to another video in the playlist through the UI, the problems clears itself. So only one caption appears as expected (for my use case), and even if I go back to the original video that I first loaded on the page, the caption is correct and there aren't multiple captions. After discovering this behavior, I thought maybe I could try calling currentIndex function multiple times, since if clicking on another video through the UI triggers the same currentIndex function to run, then the problem should clear itself. But it did not, as calling currentIndex function twice would just create 3 captions, and so on.

    My Conclusion

    I think there may be a bug with the initialization of the video player since it only happens at the start, and the problems clears itself if I click on another video in the UI. Maybe some food for thought, but how does the UI switch to another video programmatically when I click on it in the UI? Does it use the currentIndex function? If it does, then that further corroborates that there may be some bug on initialization. If not, maybe compare the other function with currentIndex to see if there are any fundamental differences in implementation.

    Hope all of this information helps!

    0
  • Loic Verger Del Bove

    Hi Edward,

    Thanks for creating a ticket and for the CodeSandbox you shared via the ticket.

    Let's keep the discussion over the ticket and we will update you regarding our progress towards a fix.

    Best,

    Loic

    0

Post is closed for comments.

Didn't find what you were looking for?

New post