How to embed a 360 VR (virtual reality) music video on your website
by on June 11, 2016 in 360 Degree Video tech Virtual Reality

It might take a while to load. Be patient. Click the [ ] icon to watch the 360 virtual reality video full-screen with your browser or with Google Cardboard or VR headset.

Google developers created VR view so that anyone can embed 360 degree VR media into websites on desktop and mobile.

VR view supports true stereoscopic VR playback through compatibility with Google Cardboard, it defaults to a simple “magic window” mode that works on everything from desktop browsers to mobile apps without any special hardware.

VR view supports mono and stereo 360 images and videos. Images and video need to be stored in the equirectangular-panoramic (equirect- pano) format, which is a common format supported by many capture solutions.

virtual reality

1. First download the open source code on GitHub, Click on the download ZIP button on GitHub, download the file and unzip it onto your desktop.

2. Upload the unzipped folder to your website. I uploaded it to the root folder. For example: olitunes.com/vrview-master.

3. Uploaded the mp4 without injected metadata to the folder /vrview-master/examples/video/avalaches2.mp4.

4. The simplest way to embed on your website is by including an iframe that links to the VR view source and specifies which image or video URL to show. I used the following code:

<iframe src="https://olitunes.com/vrview-master/index.html?video=examples/video/avalanches2.mp4" width="100%" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Info:

  • VR view videos should be stored as mp4s encoded with h264.
  • Mono videos should be 2:1 aspect ratio.
  • Stereo videos should be 1:1 aspect ratio.
  • Some older devices cannot decode video larger than 1080p (1920×1080). If maximum compatibility and quality is a priority, they recommend that users provide both a monoscopic 1920×1080 video and a stereo video at 2048×2048 or higher.

Extra parameters:

  • image or video: {String} URL of image or video to load. (required)
  • is_stereo: {Boolean} true if content is in stacked stereo format. (optional, default false)
  • preview: {String} URL of still preview to load first. (optional, default none)
  • start_yaw: {Number} Initial yaw of viewer, in degrees. (optional, default 0)
  • is_yaw_only: {Boolean} true if motion is restricted to yaw only. (optional, default false)

That’s it.

Note: When you host the file yourself and use VR View the video does not need the injected metadata that you use for YouTube just simply the mp4.

Read also: How to upload 360-degree virtual reality videos – YouTube, Facebook, Vrideo

Now that you have read to the bottom of this post, you’ve probably noticed your browser is lagging or crashing, because hosting a 2 GB 4K VR video doesn’t play well with most browsers.

That’s why it might be a better idea to host on the following sites. But at least we tried.

Great places to upload 360 VR video:

Note: YouTube videos have to have metadata injected into the mp4
Remember to up the resolution to 4k if you can
.

or on Facebook
Note: needs metadata

For a fully immersive effect view using VR headsets or Google Cardboard. Please up your resolution to watch.

The song, “Love of Avalanches” is available on:

Bandcamp
iTunes
Soundcloud

Leave a Reply

© 2020 olitunes.com All rights reserved Privacy Policy • Terms of Service