VideoJS错误未捕获TypeError:无法读取null的属性“”nodeName“”

问题分析

VideoJS错误未捕获TypeError:无法读取null的属性“nodeName” 这个错误通常表示在尝试访问一个不存在的DOM元素的属性时发生的。具体来说，nodeName 属性是用于获取元素的名称，例如 <video> 元素的 nodeName 是 "VIDEO"。

原因

DOM元素未加载：在页面加载完成之前尝试访问DOM元素。
选择器错误：使用的选择器无法找到对应的DOM元素。
异步问题：在异步操作（如AJAX请求）完成后尝试访问DOM元素，但此时DOM元素还未准备好。

解决方案

1. 确保DOM元素已加载

使用 window.onload 或 document.addEventListener('DOMContentLoaded', ...) 来确保在DOM完全加载后再执行相关代码。

document.addEventListener('DOMContentLoaded', function() {
    var player = videojs('my-video');
});

2. 检查选择器

确保使用的选择器能够正确找到目标DOM元素。

<video id="my-video" class="video-js"></video>

var player = videojs('my-video');

3. 处理异步操作

如果在异步操作完成后访问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>