This is a basic example of 360 video playback, using A-Frame's latest master distribution build.
In this example, the video is played using the a-videosphere
primitive as the display.
Note: Due to the way this video was authored, playback display is rotated 180 degrees so the viewer appears to move forward instead of backward.
In some scenarios, particularly with mobile browsers,
security rules will prevent the video from playing automatically.
To work around this limitation, window event handlers are attached that will try to start or toggle playback based on user input (here specifically, click
).
The video element is specified with a single possible source.
That source uses MP4 format, which is widely supported by available browsers.
For maximum compatibility, it is currently recommended to use MP4 format when possible.
The video element is specified with two possible sources.
The first uses HLS format, for those browsers that support native HLS playback.
The second uses MP4 format, which is widely supported by available browsers.
At present, this video file is not available in WebM format.
The browser implementation will automatically pick which source to use.
Note that this example does not follow the above recommendation, because it is specifically trying to exercise native HLS playback... which as a result introduces compatibility issues with certain Safari versions at time of writing.