I needed to read and then modify some of the tags and attributes in the video element, which uses video.js as its player. I have been able to read the information using getElementsByTagName and getAttribute, as shown in the code below. But I was hoping there was an easier/better/best way to do this through video.js (5.6.0).

var video = document.getElementsByTagName('video')[0];
var poster = video.getAttribute('poster');
var sources = video.getElementsByTagName('source');
var tracks = video.getElementsByTagName('track');

if (poster != null)
{
    var newposter = addChk(poster, "p");  // generates modified source
    video.setAttribute('poster', newposter);
}

for (var i = 0; i < sources.length; i++) {
    var s = sources[i].getAttribute('src');
    s = addChk(s,"f");                    // generates modified source
    sources[i].setAttribute('src', s);
}

for (var i = 0; i < tracks.length; i++)
{
    var s = tracks[i].getAttribute('src');
    s = addChk(s, "c");                   // generates modified source
    tracks[i].setAttribute('src', s);
}

Thanks.

I needed to read and then modify some of the tags and attributes in the video element, which uses video.js as its player. I have been able to read the information using getElementsByTagName and getAttribute, as shown in the code below. But I was hoping there was an easier/better/best way to do this through video.js (5.6.0).

var video = document.getElementsByTagName('video')[0];
var poster = video.getAttribute('poster');
var sources = video.getElementsByTagName('source');
var tracks = video.getElementsByTagName('track');

if (poster != null)
{
    var newposter = addChk(poster, "p");  // generates modified source
    video.setAttribute('poster', newposter);
}

for (var i = 0; i < sources.length; i++) {
    var s = sources[i].getAttribute('src');
    s = addChk(s,"f");                    // generates modified source
    sources[i].setAttribute('src', s);
}

for (var i = 0; i < tracks.length; i++)
{
    var s = tracks[i].getAttribute('src');
    s = addChk(s, "c");                   // generates modified source
    tracks[i].setAttribute('src', s);
}

Thanks.

• javascript
• video
• video.js
• getelementsbytagname
• getattribute

2 Answers 2

As you're using video.js you should use its API for these. Directly modifying the video element after the player creation won't always work as expected, and if you ever have a different playback tech in use (such as Flash on IE8) there won't even be a video element.

var player = videojs('my_player_id');

// Get/set poster:
console.log(player.poster());
player.poster('//example./poster.jpg');

// Get source:
console.log(player.currentSrc());

// Update source:
player.src({src: '//example./video.mp4', type: 'video/mp4'});

// Multiple sources:
player.src([
  {src: '//example./video.m3u8', type: 'application/x-mpegURL'},
  {src: '//example./video.mp4', type: 'video/mp4'}
]);

For updating tracks you'll need to remove the existing track(s) before adding for now.

// Remove tracks:
var tracks = player.textTracks();
for (i = 0; i<tracks.length;i++) {
  player.removeRemoteTextTrack(tracks[i]);
}
// Add a track
player.addRemoteTextTrack({
  kind: 'captions',
  src: '//example./captions.vtt',
  srclang: 'is',
  label: 'íslenska'
});

// never touch videoElement again. It's owned by videojs now.
var player = videojs(videoElement);

// IWillNotUseThisInPlugins is mandatory, per videojs spec
// https://github./videojs/video.js/issues/2617
player.tech({IWillNotUseThisInPlugins: true}).getAttribute('playsinline')