VideoJS错误未捕获TypeError:无法读取null的属性“nodeName”
这个错误通常表示在尝试访问一个不存在的DOM元素的属性时发生的。具体来说,nodeName
属性是用于获取元素的名称,例如 <video>
元素的 nodeName
是 "VIDEO"
。
使用 window.onload
或 document.addEventListener('DOMContentLoaded', ...)
来确保在DOM完全加载后再执行相关代码。
document.addEventListener('DOMContentLoaded', function() {
var player = videojs('my-video');
});
确保使用的选择器能够正确找到目标DOM元素。
<video id="my-video" class="video-js"></video>
var player = videojs('my-video');
如果在异步操作完成后访问DOM元素,确保在DOM元素准备好后再进行操作。
fetch('some-api-endpoint')
.then(response => response.json())
.then(data => {
// 确保DOM元素已加载
document.addEventListener('DOMContentLoaded', function() {
var player = videojs('my-video');
});
});
以下是一个完整的示例,展示了如何在确保DOM元素加载后再初始化Video.js播放器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video.js Example</title>
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="my-video" class="video-js">
<source src="http://example.com/path/to/video.mp4" type="video/mp4" />
</video>
<script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var player = videojs('my-video');
});
</script>
</body>
</html>
通过以上方法,可以有效避免 TypeError:无法读取null的属性“nodeName”
错误,并确保Video.js播放器能够正确初始化。
领取专属 10元无门槛券
手把手带您无忧上云