javascript - 删除多个 HTML5 视频的控件

Question

我正在创建一个包含视频的网格布局页面。这将是一个巨大的项目，所以我需要从类里面访问视频持有者。我创建了新控件，但无法隐藏原来的 html5 控件。这有效:

var player = document.getElementById('vid1');
player.removeAttribute('controls');

这不是(也尝试应用一个类并访问它，但没有运气):

var player = document.getElementsByTagName('video');
player.removeAttribute('controls');

如何轻松访问所有视频容器并隐藏控件？

谢谢!

Answer 1

document.getElementsByTagName 返回页面中具有指定标签名称的元素的类数组对象。

这个类似数组的对象没有removeAttribute 方法，它只是一个容器，用于保存您的document.getElementsByTagName 调用返回的元素；该数组中的 DOM 对象具有 removeAttribute 方法。

您将不得不像数组一样遍历并分别从每个数组中删除属性:

    var players = document.getElementsByTagName('video');
    
    for(var i = 0; i < players.length; i++) {
    players[i].removeAttribute('controls');
    }

    // the "video" HTML elements now have no "controls" attribute.
    console.log(players);

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>

如果您想在 1 条语句中完成所有操作(我更喜欢这条语句，我们借用了 Array#map):

Array.prototype.map.call(document.getElementsByTagName("video"), function(el){
el.removeAttribute("controls");
});

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>