Lightning.js集成videojs报The element or ID supplied is not valid如何解决

报错原因 #

• 核心原因1：你通过document.createElement创建的video元素仅存在于内存中，没有插入到当前页面的DOM树里，调用videojs('myvideo')时，videojs会从全局DOM中查询id为myvideo的元素，自然找不到，触发非法元素/ID的报错。
• 核心原因2：你错误地在Lightning.js的静态_template方法里执行原生DOM操作和播放器初始化逻辑：_template方法是Lightning用来生成组件渲染模板的，执行时机远早于组件实际挂载到页面的阶段，此时哪怕你把元素插入DOM，也可能因为生命周期时序问题执行失败。

解决方法 #

1. 替换逻辑执行的生命周期：将DOM创建、播放器初始化逻辑移到Lightning组件的_init（组件初始化完成触发）或_active（组件激活触发）钩子中，不要放在_template方法里。
2. 创建video元素后手动插入DOM树：调用document.body.appendChild(video)将生成的video元素插入到页面DOM中。
3. 初始化videojs时直接传入DOM对象：不用传id字符串查询，直接把你创建的video变量传给videojs()，避免DOM查询失败的问题。

修改后的可运行代码参考：

import { Lightning, Utils } from '@lightningjs/sdk'
import videojs from 'video.js'

export default class App extends Lightning.Component {
  static getFonts() {
    return [{ family: 'Regular', url: Utils.asset('fonts/Roboto-Regular.ttf') }]
  }

  static _template() {
    // 这里仅返回Lightning的渲染模板配置，不要做原生DOM操作
    return {
      // 其余Lightning UI元素定义在此处
    }
  }

  _init() {
    // 组件初始化完成后再执行DOM操作和播放器初始化
    const video = document.createElement('video')
    const source = document.createElement('source')
    
    video.setAttribute("id","myvideo");
    video.setAttribute("class","video-player");
    // 调整原生DOM层级，避免被Lightning的canvas画布遮挡
    video.style.position = 'absolute'
    video.style.top = 0
    video.style.left = 0
    video.style.zIndex = 10

    source.setAttribute("type", 'video/mp4');
    source.setAttribute("src", "https://github.com/googleboy0/Programming/raw/main/Dilwale%20Dulhania%20Le%20Jayenge%20-%20Trailer%20(with%20English%20Subtitles).mp4")
    video.appendChild(source);
    // 把video元素插入到页面DOM树
    document.body.appendChild(video)
    // 直接传入DOM对象初始化，无需通过ID查询
    const player = videojs(video)
    player.play()
  }
}

补充注意 #

如果需要控制视频的显示尺寸、隐藏/展示状态，直接操作video元素的style属性即可，注意和Lightning画布的z-index层级匹配，避免出现视频被遮挡或者遮挡其他UI的问题。

内容的提问来源于stack exchange，提问作者anand patel