在 video.js 中读取视频元素/属性的正确方法是什么？答案

【问题标题】：What is the proper way to read the video elements/attributes in video.js?在 video.js 中读取视频元素/属性的正确方法是什么？
【发布时间】：2016-02-06 06:24:44
【问题描述】：

我需要阅读并修改视频元素中的一些标签和属性，该元素使用 video.js 作为其播放器。我已经能够使用 getElementsByTagName 和 getAttribute 读取信息，如下面的代码所示。但我希望通过 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);
}

谢谢。

【问题讨论】：

标签： javascript video video.js getelementsbytagname getattribute

【解决方案1】：

当您使用 video.js 时，您应该使用它的 API 来处理这些内容。在创建播放器后直接修改视频元素并不总是按预期工作，如果您使用了不同的播放技术（例如 IE8 上的 Flash），甚至不会有视频元素。

var player = videojs('my_player_id');

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

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

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

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

要更新曲目，您需要先删除现有曲目，然后再添加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.com/captions.vtt',
  srclang: 'is',
  label: 'íslenska'
});

【讨论】：

感谢有关 video.js 方法的详细信息。我将我的使用限制为仅 mp4 和 webm，而不是处理 IE8。鉴于这些假设，如果我在执行 getElementsByTagName/getAttribute 操作之前不创建 video.js 播放器（即，在手动设置 video.js 播放器之前执行代码，而不依赖于 data-setup 属性），getElementsByTagName/getAttribute 安全吗？（只是想确保我了解什么可行，什么不可行。）
我不会推荐它。初始化播放器后，使用 video.js API 与视频元素进行交互。
谢谢。我假设您的意思是轨道，而不是删除文本轨道的循环中的 tt？

【解决方案2】：

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

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

【讨论】：