I am new to videojs and lightning.js. I tried using document.querySelector but still getting the same error. I thought maybe because of browser, so I tried in chrome, firefox, edge.

TypeError: The element or ID supplied is not valid. (videojs) at videojs (video.es.js:27887) at Function._template (App.js:19) at Function.getTemplateFunc (lightning.js:9068) at new Component (lightning.js:9016) at new App (App.js:4) at Stage.element (lightning.js:13634) at Stage.c (lightning.js:13642) at index.js:117 ,i am getting error in this line -> var player = videojs('myvideo')

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() {
    var video = document.createElement('video')
    var source = document.createElement('source')
    console.log(video);
    
    video.setAttribute("id","myvideo");
    video.setAttribute("class","video-player");
    source.setAttribute("type", 'video/mp4');
    source.setAttribute("src", "https://github.com/googleboy0/Programming/raw/main/Dilwale Dulhania Le Jayenge - Trailer (with English Subtitles).mp4")
    video.appendChild(source);
    var player = videojs('myvideo')
    player.play()

  }
}

CodePudding user response：

You're creating an element but never adding it to the document. Therefore, the library can't find it. (You're giving it an ID, not an actual element.) See the docs for createElement for how that's done.