Compatible with videojs-contrib-dash?

[andy-mcdonald]

Just wondering if anyone has successfully managed to get videojs-panorama to work with videojs-contrib-dash? Although videojs-contrib-hls should work in theory, it seems people are still having some trouble implementing this in practice. Is there a compelling case to use one versus the other? Does anyone know of any live examples of either approach working with 360 videos using the videojs-panorama plugin?

Any advice would be greatly appreciated!

[andy-mcdonald]

After some experimentation with video-contrib-dash, I've managed to get adaptive streaming working on desktop (MacOS Chrome / Safari / Firefox - not tested Windows IE / Edge yet). When I try on mobile Safari however, the message 'No compatible source was found for this media' is displayed along with the default X in the middle of the player. The following error is logged in the console:

MediaError {code: 4, message: "No compatible source was found for this media.", status: null, MEDIA_ERR_CUSTOM: 0, MEDIA_ERR_ABORTED: 1, …}

One main difference in the implementation between using an equirectangular .mpd file with videojs-contrib-dash versus a standard .mp4 is that instead of hard-coding a <source> tag (with src and type attributes) within the <video> element, I set this by adding the following to the beginning of the videojs-panorama plugin callback function:

this.videoPlayer.src({
  src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
  type: 'application/dash+xml'
})

I also noticed that when using videojs-contrib-dash, I could not import the video file locally via the webpack file-loader as I had done with the .mp4 - it would only work by setting the src to the remote URL of the file. Maybe it's not working on mobile due to the cross-domain issues? So far, I've only been testing with localhost and am not currently using the iframe workaround.

For what it's worth, the site is built in React and I have upgraded to the latest version of videojs-panorama.

Here is my basic setup:

Javascript

this.videoPlayer = videojs('videojs-panorama-player', {
      plugins: {
        panorama: {
          clickAndDrag: true,
          clickToToggle: !this.isMobile(),
          scrollable: false,
          autoMobileOrientation: true,
          backToHorizonCenter: false,
          backToVerticalCenter: false,
          initFov: 80,
          minLat: -80,
          maxLat: 80,
          VREnable: this.isMobile(),
          NoticeMessage: this.isMobile() ? 'please drag and drop the video' : 'please use your mouse drag and drop the video',
          autoHideNotice: 2000,
          callback: () => {

            console.log('PANORAMA CALLBACK')

            const videoElement = document.getElementById('videojs-panorama-player')
            const width = videoElement.offsetWidth
            const height = videoElement.offsetHeight

            this.videoPlayer.width(width)
            this.videoPlayer.height(height)
            this.videoPlayer.preload(true)
            this.videoPlayer.controls(false)
            this.videoPlayer.src({
              src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
              type: 'application/dash+xml'
            })

            this.videoCanvas = this.videoPlayer.getChild('Canvas')
          }
        }
      }
    }, () => {
      console.log('PLAYER CALLBACK')
    })

HTML (JSX)

<div className='video-player'>
    <video id='videojs-panorama-player' className='video-js vjs-default-skin' />
</div>

@yanwsh - any ideas what could be causing the problem?

[andy-mcdonald]

Okay, looks like the issue is with videojs-contrib-dash and the fact that it doesn't work on iOS Safari due to the lack of support for MSE.

https://github.com/videojs/videojs-contrib-dash/issues/136

Wish I'd seen that before wasting the last few hours. I guess I should try videojs-contrib-hls instead.

[yanwsh]

Sorry for the late reply, I don't know videojs-contrib-dash, did you try videojs-contrib-hls? If you want to work on ios safari, please make sure the video source which you use should keep the same domain which the player you host. Please considered to use proxy to avoid cross domain. This is the biggest known issue right now for make videojs-panorama and videojs-contrib-hls working together.

[vsalema]

the videojs dash player works very well in all browsers see the demo https://filmsgratos.site/suplayernuevo2.html player videojs image https://filmsgratos.com/