我正在将此函数用于 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() 内部访问变量 video。有哪些实现方法？任何指南或答案都会非常有帮助。请指导我纠正我的错误。 顺便说一句，这是我在 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>
最佳答案
问题是 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>关于javascript - 未捕获的类型错误: video.removeAttribute不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33552765/