删除多个 HTML5 个视频的控件

Question

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

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

这不是（也曾尝试应用 class 并访问它，但没有成功）：

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

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

谢谢！

Answer 1

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

这个类似数组的对象没有 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>

删除多个 HTML5 个视频的控件

Remove controls for mutliple HTML5 videos

javascript

html

video

custom-controls