Specifying the content type

Specifying the content type

Related Options

1. projectionType
2. image
3. video

Loading Cubestip projection type images

Supported Projection Type

PanoViewer uses a projectionType of the "equirectangular" type by default. To use the "cubestrip" type of projection type, specify the projectionType property in the constructor.

// create PanoViewer with option
var panoViewer = new PanoViewer(
	document.getElementById("myPanoViewer"),
	{
		image: "/path/to/image/image.jpg",
		projectionType: PanoViewer.PROJECTION_TYPE.CUBESTRIP //or "cubestrip";
	}
);

After initializing panoViewer, you can override the image using the setImage method. At this time, projectionType can be optionally specified for the second argument. The default value is PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR (constant value) or "equirectangular" (string).

panoViewer.setImage("/path/to/image/image.jpg", {
	projectionType: PanoViewer.PROJECTION_TYPE.CUBESTRIP
});

Go to Example

• 360 Image (vertical cubestrip)

Loading video

The video property of the constructor option (second parameter) allows you to display 360 videos.

Note, however, that you can not specify the image and video attributes together.

In our basic example, we have assigned the video tag to the video property. PanoViewer also supports video URL input for your convenience.

Below is an example of passing object information of type {src, type} as an array.

// create PanoViewer with option
var panoViewer = new PanoViewer(
	document.getElementById("myPanoViewer"),{
		video: [{
			src: "/path/to/video/video.mp4"
			type: "video/mp4"
		}, {
			src: "/path/to/video/video.mkv",
			type: "video/mkv"
		}]
		/* If you do not specify a projection type, use an equirectangular projectionType.*/
	}
);

The video attribute can also be specified in the following form:

// 1. Video Tag
video: videoTag

// 2. Video URL
video: "/path/to/video/video.mp4"

// 3. Array of URL
video: ["/path/to/video/video.mp4", "/path/to/video/video.mkv"]

// 4. Array of {src, type} type
video: [{
	src: "/path/to/video/video.mp4"
	type: "video/mp4"
}, {
	src: "/path/to/video/video.mkv",
	type: "video/mkv"
}]

It is recommended that you specify the mime type of your video so that it does not unnecessarily request unsupported videos from your browser.

As with images, it also provides methods for specifying video.

The first argument of the method supports the same type that can be specified in the video attribute of the constructor. The second argument can optionally specify projectionType, which defaults to PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR (constant) or "equirectangular" (string).

panoViewer.setVideo("/path/to/image/image.jpg", {
	projectionType: PanoViewer.PROJECTION_TYPE.CUBESTRIP
});

Go to Example

• 360 Video with resource url

Getting video objects

Provides an interface for accessing video tags (objects) even if you specify a video URL instead of assigning a video tag to the video property.

// create PanoViewer with option
var panoViewer = new PanoViewer(
	document.getElementById("myPanoViewer"),
	{
		video: [{
			src: "/path/to/video/video.mp4"
			type: "video/mp4"
		}, {
			src: "/path/to/video/video.mkv",
			type: "video/mkv"
		}]
		/* If you do not specify a projection type, use an equirectangular projectionType*/
	}
);

You can get information about Video tag (object) by calling getVideo().

var videoTag = panoViewer.getVideo();

videoTag.play(); // play video!