未捕获的TypeError：video.removeAttribute不是函数

Question

I am using this function for a HTML5 video player project. 我正在HTML5视频播放器项目中使用此功能。 This is the place I got the code from. 这是我从中获得代码的地方。 I am comparatively new to the Javascript so having some problem understanding the code fully. 我是Java的新手，因此在完全理解代码方面有些问题。 Whenever the function is executed, it simply logs : 每当执行该函数时，它只会记录：

Uncaught TypeError: video.removeAttribute is not a function

   videoPlayer.init @   vp.js:8
   (anonymous function) @   vp.js:13
   (anonymous function) @   vp.js:15

Same happens to video.addEventListener if Line 8 is commented out. 如果第8行被注释掉， video.addEventListener也会发生同样的情况。

Console logging video on 7th line outputs [] and clicking on it, it expands to : 控制台在第7行输出[]上记录视频，然后单击它，它会扩展为：

   0: video#video
   length: 1
   video: video#video
   __proto__: HTMLCollection

So, how the variable video can be accessed inside init(). 因此，如何在init（）中访问可变视频。 What are the ways to implement it? 有哪些实施方法？ Any guidelines or answers would be so helpful. 任何指导方针或答案都将非常有帮助。 Please direct me on my mistakes. 请指示我的错误。 By the way, this is my first question on stackoverflow network. 顺便说一句，这是我对stackoverflow网络的第一个问题。

Here's the Javascript Code : 这是Javascript代码：

(function( window, document) {
    var video = document.getElementsByTagName('video');
        var videoPlayer = { 
            init : function() { 
                var that = this; 
                document.documentElement.className = 'js';  
                console.log(video);
                video.removeAttribute('controls'); 
                video.addEventListener('loadeddata', this.initializeControls, false); 
           }
        }; 

        videoPlayer.init(); 

}( this, document ));

Here's the HTML Code : 这是HTML代码：

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Custom HTML5 Video Player</title>
   <script type="text/javascript" src="js/vp.js"></script>
</head>
<body>
<div id="container" style="margin: auto; width: 1000px;">
    <h1> HTML5 Video </h1>
    <div id="video_container">
        <video id="video" controls width="1000px" preload>
            <source src="vdo/Mauka.mp4" type="video/mp4">
        </video>
    </div>
</div>
</body>
</html>

Answer 1

The problem is that the getElementsByTagName() function returns a list of elements, not a single one. 问题是getElementsByTagName()函数返回的是元素列表，而不是单个元素。 You seem to have only one, so you can access the first element in the list like this document.getElementsByTagName('video')[0]; 您似乎只有一个，因此可以像这样访问document.getElementsByTagName('video')[0];列表的第一个元素document.getElementsByTagName('video')[0]; . 。 Try this: 尝试这个：

 (function( window, document) { var video = document.getElementsByTagName('video')[0]; var videoPlayer = { init : function() { var that = this; document.documentElement.className = 'js'; console.log(video); video.removeAttribute('controls'); video.addEventListener('loadeddata', this.initializeControls, false); } }; videoPlayer.init(); }( this, document ));

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Custom HTML5 Video Player</title> <script type="text/javascript" src="js/vp.js"></script> </head> <body> <div id="container" style="margin: auto; width: 1000px;"> <h1> HTML5 Video </h1> <div id="video_container"> <video id="video" controls width="1000px" preload> <source src="vdo/Mauka.mp4" type="video/mp4"> </video> </div> </div> </body> </html>

However, if all you want is hide the video controls and play automatically once loaded, you don't need any JavaScript. 但是，如果您只想隐藏视频控件并在加载后自动播放，则不需要任何JavaScript。 Try this: 尝试这个：

 <video id="video" width="300px" autoplay> <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video>

未捕获的TypeError：video.removeAttribute不是函数

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-05 19:10:16

未捕获的TypeError：video.removeAttribute不是函数

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-05 19:10:16

解决方案1
1 已采纳 2015-11-05 19:10:16