how to add Text Tracks to video in Post

  • bbrynnn

    (@bbrynnn)


    1 year, 2 months ago

    Hello,

    We’re a very new website, with only a couple of plugins installed. We use the Posts for publishing tutorials. Within the tutorials, we often include a video. There we found an option for something called Text Tracks. Although we have read generally about what Text Track is, and how to write them properly, from MS webpages, this is the only support page we have been able to find that is specific to WP https://wordpress.com/support/add-chapters-and-captions-to-a-video/

    But when we follow the instructions, after we enter Label, Kind and Language, there is no Save button. I wonder if we might need to install a special plugin? Or otherwise, how can we attach the VTT file to the video?

    Thank you very much,
    brynn

Viewing 13 replies - 1 through 13 (of 13 total)
  • George Appiah

    (@gappiah)

    1 year, 2 months ago

    Although we have read generally about what Text Track is, and how to write them properly, from MS webpages, this is the only support page we have been able to find that is specific to WP https://wordpress.com/support/add-chapters-and-captions-to-a-video/

    I don’t know what is “MS webpages”… but if your site is not on the WordPress.com hosted platform, then this should be the equivalent documentation for self-hosted WordPress (aka WordPress.org) users: https://wordpress.org/documentation/article/video-block/

    That said, the two links cover the same subject: the Video block and are almost identical.

    But when we follow the instructions, after we enter Label, Kind and Language, there is no Save button.

    The changes are retained when you CLOSE the dialogue box. But, as with all edits made on the page/post in question, you need to PUBLISH/SAVE the page itself before it goes live online.

    I wonder if we might need to install a special plugin? Or otherwise, how can we attach the VTT file to the video?

    The Label, Kind and Language you mentioned above are only on the Edit Track dialog box… which you only get after uploading a track file. You don’t need a plugin for this. See the screenshot below (a similar screenshot is on the WordPress.com link you provided, but you must have missed it).

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    I don’t know what is “MS webpages”…

    I mean, when we search for info on “text tracks” most of the results are microsoft webpages, explaining in general what text tracks are. We only found the one page explaining how to use them on WP.

    As far as I can tell, we have created the VTT file properly. The VTT file has been uploaded to our media library. I open the post for editing, and I click on the video. Then I click on Text Tracks. There I can see the VTT file listed by the name I gave it, with an option to edit it.

    If I click the Upload button, like in your screenshot, it only uploads the VTT file another time into our library.

    The part I am not sure of, is exactly when does the VTT file become associated with the video?

    Yes, of course I have Saved the Post. But when I try to play the video, there is no text that shows up from the VTT file. Since I’m not sure exactly when the VTT file becomes associated to the video, I’m not sure if it has actually happened.

    The video is not showing any special “captions” button. So that leads me to think that the VTT file did not become associated with the video. So I don’t know where things went wrong.

    Thanks again.

    Edit — Hold on, I just found an icon that looks different from the one in your tutorial. I think it might be what I need. Let me start the process from the start, and see it if works this time. I’ll be back shortly.

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    Something still does not work. Let me write out my process in steps.

    1. Open the post for editing
    2. Click on the video
    3. Click Text Tracks > Upload > choose my VTT file
    4. Save the post
    5. On the video, click a tiny button that says CC and then click the name I gave the VTT file.
    6. Click Play on the video

    No text from the vtt file is ever displayed. Where did I go wrong?

    George Appiah

    (@gappiah)

    1 year, 1 month ago

    On the video, click a tiny button that says CC and then click the name I gave the VTT file.

    Works for me.

    If it’s still not working, try to save the page first, and test on the frontend (outside the editor).

    George Appiah

    (@gappiah)

    1 year, 1 month ago

    If this is still not working for you, it may be your track file. Test with the video and .vtt file from this Github repo: https://brenopolanski.github.io/html5-video-webvtt-example/

    I used that to create this test page: https://blameless-cowfish-651c82.instawp.xyz/video-block/

    The first video has no track, but the second video has a track. The track displays fine. Sorry for the InstaWP interstitial.

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    The only difference between my VTT file and the one in the github example, is that I don’t have mine numbered. But the info I read from the microsoft pages said that it’s not necessary to number them. So I will edit my VTT file and see what happens if I number each item.

    Meanwhile, is there a way to have the captions, where the person reading the post only has to start the video and the captions are display automatically? It looks like we will have to include instructions to find the tiny CC button.

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    No, numbering the items in the VTT file did not solve the problem.

    But I notice in the example given above, the video is a HTML5 file. Our video is MP4. Do the Text Tracks only work with certain video formats?

    Thanks again.

    Also, as I asked earlier, is there some way to set it up, so that readers only have to start the video, and the captions will be displayed automatically? Or will they have to locate the tiny CC button and click the blue text?

    brynn

    George Appiah

    (@gappiah)

    1 year, 1 month ago

    But I notice in the example given above, the video is a HTML5 file. Our video is MP4. Do the Text Tracks only work with certain video formats?

    As far as the video itself is concerned, there’s no such thing as “HTML5 video”: https://en.wikipedia.org/wiki/Comparison_of_video_container_formats

    The term “HTML5 video” only refers to using the standard HTML5 <video> element to play the video rather than some browser plugin or JavaScript library. In other words, “HTML5 video” refers to the video player, and not the video itself.

    The WordPress Video block uses this standard HTML5 video player, and the video file on the GitHub page (which I tested) is actually an MP4 video.

    If you haven’t done so already, I highly recommend downloading the .mp4 and .vtt files from the link I provided and testing. And if you could provide public links to your MP4 and VTT files, I’d be happy to test them for you.

    Also, as I asked earlier, is there some way to set it up, so that readers only have to start the video, and the captions will be displayed automatically? Or will they have to locate the tiny CC button and click the blue text?

    Is there a way to do this using the native Video block? Yes.

    Is this way feasible for you? Probably not.

    For reference, my test page now displays the Portuguese language subtitles automatically when the video is played: https://blameless-cowfish-651c82.instawp.xyz/video-block/

    Here’s the thing: the HTML5 <track> (which the WordPress video block uses for the “Text Tracks” feature) supports a default null attribute for just this scenario. Unfortunately, the WordPress Video block doesn’t support setting a track as default.

    For my test page, I had to switch the editor to Code Editor to add the default attribute directly in the code and save the page. Even then, switching back to the Visual Editor gave the error “Block contains unexpected or invalid content”. Clicking the “Attempt Recovery” button fixed the supposed error by removing the perfectly valid default attribute that I intentionally added to the code.

    I’m all for simplicity and I’m not a big fan of installing plugins to replace native features. But considering your use case, I feel you may be better served by a 3rd-party video plugin.

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    I’ve looked at your test page, and played the video, and opened the VTT file. But I’m not sure what you mean about downloading them and testing them. Test them for what? I can see how the text works on the video, and how the VTT file is written, but testing beyond that, I’m not sure what that would be?

    Oh, well making the text show up without clicking the tiny CC button is not a deal-breaker – it just would be nice. By 3rd party plugin, you mean like You Tube? Or something else?

    Maybe I should say that the MP4 video we have at the moment is not a YT video. Also it was converted from an animated GIF (using ezgif website). Possibly that has interferred with the text tracks being applied properly?

    I could always re-record it in the MP4 format directly, I was just being lazy when I converted it.

    If this info does not reveal the problem, then I can make our video public for you.

    Thanks again

    George Appiah

    (@gappiah)

    1 year, 1 month ago

    Sorry for the long silence: life got in the way 😀

    But I’m not sure what you mean about downloading them and testing them.

    I meant uploading and publishing these on your WordPress page.

    Since we know for sure these files display the tracks on my WordPress site, if you can’t get these to work on your WordPress site, then the problem must be something peculiar to your site: hosting environment, plugin conflict, etc.

    By 3rd party plugin, you mean like You Tube? Or something else?

    I meant a WordPress video player plugin, not a video hosting service like YouTube.

    Maybe I should say that the MP4 video we have at the moment is not a YT video. Also it was converted from an animated GIF (using ezgif website). Possibly that has interferred with the text tracks being applied properly?

    This is why I want to post your video and VTT files on my demo WordPress site to see if I can get the tracks to work on my site.

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    Oooohhh, ok.

    Should I try the WP video player plugin first — before we start testing videos?

    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    I was going to go ahead and switch out your video, as you suggested, but your website seems to have been closed, so I can’t download it now.

    Maybe I’ll try the WP video player while I’m waiting….

    • This reply was modified 1 year, 1 month ago by bbrynnn.
    Thread Starter bbrynnn

    (@bbrynnn)

    1 year, 1 month ago

    If anyone else is available to help, please chime in. Meanwhile, I’m going to look into trying the aforementioned WP video player.

    Thanks 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘how to add Text Tracks to video in Post’ is closed to new replies.