fix: VR switches to the lowest resolution after loading 1 HLS chunk on HLS 360 video

[gjanblaszczyk]

Description

The http-streaming switches VR video to the lowest resolution available in HLS manifest after loading 1
HLS chunk on HLS 360 video.
The problem is related to http-streaming and adaptive algorithm. The adaptive login will only work correctly when video tag has a width and height but the VR plugin sets display: none on video tag element which makes video tag width and height equal to 0.

Specific Changes proposed

We should use opacity: 0 instead of display: none and insert canvas element after the video tag element to make it clickable.

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Unit Tests updated or fixed
  • Docs/guides updated
• Reviewed by Two Core Contributors

[brandonocasey]

It appears that this breaks video panning as the video is technically over the canvas. Seems that we also need to set the video elements z-index to something like -1. Seems to work locally with that.

[brandonocasey]

Actually we might even be able and want to use just z-index

[gjanblaszczyk]

Hi @brandonocasey, thanks for the review. Does it look fine now?

[brandonocasey]

Works for me 👍