This example demonstrates of switching between 360 and 180 videos within a playlist in both 2D rendering and WebXR. While in WebXR the controlbar displays a next and previous button to control playlists. Set the projection to switch to on the playlist item.
For 180 videos a half sphere is created. The surrounding background can display a sky dome using the skyDomeURL config.
NOTE: For Quest headsets with native layers, an AR WebXR immersive mode is used. Therefore a skydome is required to hide the AR camera until VR mode can be used.
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/playlist.min.js"></script>
<div class="flex flex-col w-full">
<div id="playlist-stereo" class=""></div>
<div id="playlist-ui"></div>
</div>
<script type="text/javascript">
var player = flowplayer("#playlist-stereo", {
"controls": "#playlist-ui",
"playlist": {
"controls": "#playlist-ui"
},
"src": {
"items": [
{
"projection": "360_TB",
"src": [
{
"src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_4.3k_30s_360_h264_crf23_binaural_CREDIT_JON_GRIFFITH_injected.mp4",
"type": "video/mp4"
}
],
"title": "Stereo 360"
},
{
"projection": "180_TB",
"src": [
{
"src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_6.2k_30s_180_TB_h264_crf27_CREDIT_JON_GRIFFITH-injected.mp4",
"type": "video/mp4"
}
],
"title": "Stereo 180"
},
{
"projection": "360_TB",
"src": [
{
"src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_4.3k_30s_360_h264_crf23_binaural_CREDIT_JON_GRIFFITH_injected.mp4",
"type": "video/mp4"
}
],
"title": "Stereo 360"
}
],
"type": "flowplayer/playlist"
},
"token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw",
"vrvideo": {
"projection": "360_TB"
}
});
</script>
