AR /VR /360 VR Video for Beginners
< Cloudinary LabsVisit Cloudinary
  • About Cloudinary Labs
  • Lab 1
    • Developing AR/VR with Unity
      • Build Your First AI AR App on Unity
      • Getting Started in Unity
      • Add the Watson Unity SDK
      • Add/Enable Vuforia
      • Add CyberSoldier Asset
      • Configure Vuforia Image Database
      • Add C# Script & Watson Credentials
      • Add Apple ID to Xcode
      • Deploy to iOS
      • Troubleshooting & Gotchas
  • Lab 2
    • Delivering 360VR Video with Cloudinary
      • Introduction to 360VR Video
      • Setting up Cloudinary
      • Uploading Video
      • Delivering Video
      • Cloudinary Video Player
      • VideoJs-Panorama Plugin
      • Source Code
Powered by GitBook
On this page
  • The Cloudinary Video Player
  • Code Review:
  • HTML:
  • Javascript:
  • CodePen:
  1. Lab 2
  2. Delivering 360VR Video with Cloudinary

Cloudinary Video Player

PreviousDelivering VideoNextVideoJs-Panorama Plugin

Last updated 7 years ago

The Cloudinary Video Player

In order to get this video onto a webpage, we could just drop that URL into an HTML5 <video> element. However, for advanced uses like adaptive streaming, playlists, and you guessed it – immersive 360° video – we’re going to supercharge the native <video> element with the .

Here’s a CodePen showing basic Cloudinary Video Player usage. I’ve commented the relevant bits; please fork it, change the account name to your own Cloudinary account name, and work in the forked Pen for the remainder of this workshop.

See the Pen by Eric Portis () on .

Note that this Pen relies on loading the , and the . Check out the exact URLs to include in your own Pens and projects under “Settings”.

As you can see, our immersive 360° video is looking pretty flat, and strange. In order to deliver a truly immersive video experience, we’re going to have to leverage a third party plugin: .

Code Review:

Include Cloudinary's JavaScript script and CSS link within your page header:

<head>
  ...
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">

<style>
body {
  /* center and letterbox the video */
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}

#demo-player {
  width: 100vw;
  height: calc(100vw * (9/16));
}
</style>

</head>

HTML:

<!-- 
a fairly-standard HTML video element. 
Note that it does not have a src or any <source>s 
We’re going to let the Cloudinary Player create those. 
-->

<video
  id="demo-player"
  loop controls
  class="cld-video-player">
</video>

<!--
Any attribute that you can set on a native HTML5 player can be set on a Cloudinary player, as well. Here, I’ve used the `loop`, and `controls` attributes.

The `cld-video-player` class is mandatory.
-->

Javascript:

Minimal Code

/* create and initalize a Cloudinary instance */
var cld = cloudinary.Cloudinary.new({
  cloud_name: "de-demo", /* 👈 change this to your cloud name! */
  secure: true /* use https everywhere */
});

var options = {
  publicId: "tropical360_qjbr2d", /* the video public ID. Yours should be the smae */
  sourceTypes: ["mp4"]
};

/* take our <video> element and give it Cloudinary Video Player superpowers */

var vplayer = cld.videoPlayer(document.getElementById("demo-player"), options);

Additional code to add player controls and deal with cross origin hosted media.

<script> 

// Cloudinary
// remember to replace cloud_name with your Cloudinary cloud name

var cld = cloudinary.Cloudinary.new({ cloud_name: "de-demo", secure: true});


var options = {
  publicId: 'tropical360_qjbr2d',
  crossorigin:"anonymous",
  preload:"metadata",
  loop: true,
  controls: true,
  sourceTypes: ["mp4"],
 };

 var vplayer = cld.videoPlayer("demo-player", options).width(400);

 </script>

That's it. This will create a HTML 5 Video player ready to play the tropical360_qjbr2d video.

CodePen:

On CodePen they manage the header and script areas, so simply click on the setting icon and add the urls for the JavaScript and CSS directly into the settings editor:

https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js
https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css
Cloudinary Video Player
Cloudinary 360 Player
@eeeps
CodePen
Cloudinary Core JavaScript library
Cloudinary Video Player JS + CSS
videojs-panorama