how to dynamically change src track on videojs

[fchedro]

I'm looking for a solution to dynamically change src of track tag with videojs. I try lots of things but nothing work. It will be really cool if could help me.

$("#playlist li").on("click", function() {
   player.pause();
   player.src( $(this).attr("movie_url"));
   // set src track corresponding to new movie //
   player.load();  
   player.play();
}

thanks a lot for answer ;) !

[mister-ben]

You're on the right track as src() is for setting as new source. Can you put a minimal live example up on jsbin or similar?

[kavin-90]

example <?php echo $sources; ?> is array of files and type and quality(360px to 1080px)

<script type="text/javascript">
videojs('video', {
    width: 'auto',
    height: 'auto',
    controls: true,
    plugins: {
      videoJsResolutionSwitcher: {
        default: 480,
        dynamicLabel: true
      }
    }
}, function(){
    var player = this;
    window.player = player
    player.updateSrc(<?php echo $sources; ?>)
    player.on('resolutionchange', function(){
        console.info('Source changed to %s', player.src())
    })
});
</script>

[mister-ben]

If your issue is with that plugin, please open an issue on its tracker. updateSrc() isn't part of Video.js core.

[kavin-90]

Maybe that exists in older version of Videojs.

@mister-ben Edit: Texted worked on Latest Videojs.

[mkhazov]

@kavin-90 it is part of videojs-resolution-switcher: https://github.com/kmoskwiak/videojs-resolution-switcher#updatesrcsource

[kavin-90]

@fchedro https://jsfiddle.net/Lkejx2yt/2/ working demo by using your code.

You were missing Main Line which is needed to run your code.

var player = videojs('my-video'); I hope it will work for you now,

[mister-ben]

I hadn't noticed the first reply wasn't from the original poster. Can we please leave @fchedro to update with details of what he's actually doing. Introducing examples relying on plugins will just make this more complicated than it needs to be.

[kavin-90]

yeah but That Example is Only Videojs no Plugins is used It use @fchedro code which is in question. i tagged and mention wrong user.

[ownmaster]

Check discussion here.

[fchedro]

Hello, thank you for your answers, but I think my question was not well understood or maybe it was not precise enough. That what I need is to dynamically change the url of the subtitle file (vtt file) at the same time as the video file. I have no problem to change video file with Videojs, but it is impossible to change subtitle simultaneously.

Thank you to help me !

[sylvio-ruiz]

Your answer is here : http://docs.videojs.com/docs/guides/text-tracks.html

player.textTracks() -> TextTrackList

This is the main interface into the text tracks of the player. It return a TextTrackList which lists all the tracks on the player.

player.remoteTextTracks() -> TextTrackList

This is a helper method to get a list of all the tracks that were created from track elements or that were added to the player by the addRemoteTextTrack method. All these tracks are removeable from the player, where-as not all tracks from player.textTracks() are necessarily removeable.

player.remoteTextTrackEls() -> HTMLTrackElementList

Another helper method, this is a list of all the track elements associated with the player. Both emulated or otherwise.

player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack

This is based on the w3c spec API and when given a kind and an optional label and language, will create a new text track for you to use. This method is intended for purely programmatic usage of tracks and has one important limitation: tracks created using this method cannot be removed. The native addTextTrack does not have a corresponding removeTextTrack, so, we actually discourage the usage of this method.

player.addRemoteTextTrack(Object options) -> HTMLTrackElement

This function takes an options object that looks pretty similar to the track element and returns a HTMLTrackElement. This object has a track property on it which is the actual TextTrack object. This TextTrack object is equivalent to the one that can be returned from player.addTextTrack with the added bonus that it can be removed from the player. Internally, video.js will either add a element for you, or emulate that depending on whether native text tracks are supported or not. The options available are:

kind
label
language (also srclang)
id
src

player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)

This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.

[gkatsev]

@sylvio-ruiz pointed in the right direction. When you change the source, you'll want to remove the previous text tracks and then add a new text track with the new url. The docs linked should help.