Using videojs-vr plugin with react

[zhumeisongsong]

It works well in pc but fail at ios10 safiri ,the screen is black.
here is the test link http://120.24.19.157:1233/

the main code

import React from 'react';
import videojs from 'video.js'
import 'videojs-vr'
import '../../../node_modules/video.js/dist/video-js.css'
import '../../../node_modules/videojs-vr/dist/videojs-vr.css'

export default class VideoPlayer extends React.Component {
  componentDidMount() {
  this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
  console.log('onPlayerReady', this)
  const player = this
  player.mediainfo = player.mediainfo || {}
  player.mediainfo.projection = '360'
  player.vr({
    projection: 'AUTO',
    debug: true,
    forceCardboard: false
  })
})
}

// destroy player on unmount
componentWillUnmount() {
  if (this.player) {
    this.player.dispose()
  }
}

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div data-vjs-player>
        <video ref={ node => this.videoNode = node } className="video-js"></video>
      </div>
    )
  }
}

my package.json

{
  "name": "vr",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0",
    "videojs-vr": "^1.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Anyone who solved this, please tell me your solution,thanks! It‘s hurry for me...

[brandonocasey]

I Don't think this is a react problem. This is likely a cross origin problem. Can you try the following:

• test to make sure an mp4 works
• try with version 1.1.0, as there have been several fixes for HLS on iOS and desktop safari
• Add crossorigin="anonymous" to the video dom element

[brandonocasey]

Feel free to create another issue if this is still an issue

[johnflux]

Note that in react it is crossOrigin="anonymous"

e.g

render() {
    return (
      <div>
        <div data-vjs-player style={{ width: '100%', height: '500px' }}>
          <video ref={node => (this.videoNode = node)} className="video-js vjs-default-skin" crossOrigin="anonymous" />
        </div>
      </div>
    );
  }