Hi everyone, I cannot play video when using VideoPlayer of @lightningjs/sdk, this is my code, please help me

Get Help
, ,
1 
import { Lightning, Utils } from '@lightningjs/sdk'
import { VideoPlayer } from '@lightningjs/sdk'

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

  _init() {
    VideoPlayer.consumer(this)
    VideoPlayer.position(0)
    VideoPlayer.size(960, 540)
    const videoUrl =
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'

    // Note: this is in fact the default loader function
    const myLoader = (url, videoEl, config) => {
      return new Promise((resolve) => {
        videoEl.setAttribute('src', url)
        videoEl.load()
        videoEl.style.zIndex = 4
        resolve()
      })
    }

    VideoPlayer.loader(myLoader)
    VideoPlayer.open(videoUrl)
    VideoPlayer.play(videoUrl)
  }
}
2

Hi @cherry ! I’m unable to run your code atm, but, are you using Chrome to run it b y any chance?

Latest versions of chrome are ver strict in they mixed content enforcement. So if you’re running this from an https website, your http content (in this case your video) won’t play.

Would you mind sharing your console logs to get a better understanding of what’s happening?

3

hi @eduardo.guzman , thank you for caring about my issue,
when I put a video in _init lifecycle to run the video immediately when I reload the browser, it’s not working. But when I put on an action like: focus, it works well. This is my console.log:

Capturelog
Capturelog1756×591 31.5 KB

4

because of the web browser’s security, you have to click (interact) on the page before video can autoplay.

1 Like
5

What @drewdub sounds reasonable. But i’ve seen a warning in Chrome when such thing happens. It’s weird that no warning are shown on the console logs screenshot shared by @cherry .

If the autoplay issue is the cause, try running again your app but with Chrome using the following flag:

--autoplay-policy=no-user-gesture-required

Just to rule out that possibility. Of course in a production environment you won’t be able to use this flag, but at least you’ll know what the cause is.

1 Like