Question

我正在将此功能用于HTML5视频播放器项目。 This是我从中获取代码的地方。我对Javascript比较陌生，因此在完全理解代码时遇到了一些问题。每当执行该函数时，它只会记录：

Uncaught TypeError: video.removeAttribute is not a function

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

如果第8行被注释掉，video.addEventListener也会发生同样的情况。

控制台记录第7行输出[]上的视频并点击它，它会扩展为：

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

那么，如何在init（）中访问变量视频。有什么方法可以实现它？任何指导方针或答案都会非常有用。请指导我的错误。顺便说一句，这是我在stackoverflow网络上的第一个问题。

这是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 ));

这是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

问题是getElementsByTagName()函数返回一个元素列表，而不是一个元素。您似乎只有一个，因此您可以像document.getElementsByTagName('video')[0];一样访问列表中的第一个元素。试试这个：

(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>

但是，如果您只想隐藏视频控件并在加载后自动播放，则不需要任何JavaScript。试试这个：

<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 个答案: