Immerse yourself in a world of virtual reality with the cutting-edge VR Vide

Question

Immerse yourself in a world of virtual reality with the cutting-edge VR Vide

Currently, I am in the process of developing a virtual panoramic tour that features various panoramas linked together with hotspots. Each panorama contains a video hotspot that plays a video.

However, I have encountered an issue where every time a new scene loads, I have to physically touch the display for the video to load. Panotour has mentioned that this behavior is normal.

My goal now is to find a solution that allows all the videos to play or stop with just one touch when entering VR mode. I attempted to create an array of all the videos and control their playback following the first touch, but this method only works for the videos in the initial scene and not the subsequent ones.

Another approach I attempted was using a global layer to insert the video source and position via JavaScript on the play button. However, global layers do not support VR stereo mode.

Furthermore, I explored consolidating all the video hotspots in the first scene, but this strategy failed as it does not allow for the presence of multiple hotspots with the same ID.

If anyone has any suggestions on how I can achieve the goal of having all videos play with just one touch upon entering VR mode, I would greatly appreciate it.

Thank you, Alex

Panotour Pro 2.5.5

javascript django virtual-reality krpano

Answer 1

Answer №1

After much trial and error, I have successfully created a tour with videos that play seamlessly on all devices. I have incorporated 5 different scenes with videos, and they all function correctly.

The key was to preload all the videospots in the first scene and set them to alpha="0.0" initially. Upon the user's first touch to enter VR mode, I play and then stop all the videos using JavaScript. I also made sure to set the videohotspots to keep="true" so they remain visible after a pano change. Depending on the loaded scene, I adjust the videos to alpha="1.0" accordingly.

The most time-consuming part was manually adjusting the video settings in the index_vr.xml file to ensure they were in the right position in the second and third scenes. By exporting the tour with the videos in their respective scenes first, I was able to obtain the correct settings (ath, atv, width, height, rx, ry, rz) before exporting the entire tour with all the videos in the first scene.

To address the issue of video sound playing only in the mainscene, I exported the videos without sound and used JavaScript to add HTML5 audio tags to play the audio separately. This way, I can control the audio and video playback simultaneously.

While it may be a workaround, this method has proven to be effective. Enjoy!

function player(){
    if(tourplayer == null){
        tourplayer = document.getElementById('krpanoSWFObject');
    }   
return tourplayer; } 

var _objIDs = ['spotvideo2869','spotvideo2870','spotvideo2871','spotvideo2872','spotvideo2873','spotvideo2874','spotvideo2875','spotvideo2876','spotvideo2877','spotvideo2878'];

$.each(_objIDs,function(index,value){
    player().call('hotspot['+value+'].play()');
    player().call('hotspot['+value+'].stop()');
});

$.each(_videoSounds,function(index,value){
    $('#container').prepend(
        '<audio preload="auto" controls style="display: none" id="'+index+'_sound"><source src="indexdata/sounds/'+value+'" type="audio/mpeg"></audio>'
    );      
    document.getElementById(index+'_sound').muted = false;
}); 

function playVideoSound(videoID) {
$.each(_videoSounds,function(index,value){
    $('#'+index+'_sound').trigger('pause');
});
$('#'+videoID+'_sound').trigger('play'); }

Answer 2

After much trial and error, I have successfully created a tour with videos that play seamlessly on all devices. I have incorporated 5 different scenes with videos, and they all function correctly.

The key was to preload all the videospots in the first scene and set them to alpha="0.0" initially. Upon the user's first touch to enter VR mode, I play and then stop all the videos using JavaScript. I also made sure to set the videohotspots to keep="true" so they remain visible after a pano change. Depending on the loaded scene, I adjust the videos to alpha="1.0" accordingly.

The most time-consuming part was manually adjusting the video settings in the index_vr.xml file to ensure they were in the right position in the second and third scenes. By exporting the tour with the videos in their respective scenes first, I was able to obtain the correct settings (ath, atv, width, height, rx, ry, rz) before exporting the entire tour with all the videos in the first scene.

To address the issue of video sound playing only in the mainscene, I exported the videos without sound and used JavaScript to add HTML5 audio tags to play the audio separately. This way, I can control the audio and video playback simultaneously.

While it may be a workaround, this method has proven to be effective. Enjoy!

function player(){
    if(tourplayer == null){
        tourplayer = document.getElementById('krpanoSWFObject');
    }   
return tourplayer; } 

var _objIDs = ['spotvideo2869','spotvideo2870','spotvideo2871','spotvideo2872','spotvideo2873','spotvideo2874','spotvideo2875','spotvideo2876','spotvideo2877','spotvideo2878'];

$.each(_objIDs,function(index,value){
    player().call('hotspot['+value+'].play()');
    player().call('hotspot['+value+'].stop()');
});

$.each(_videoSounds,function(index,value){
    $('#container').prepend(
        '<audio preload="auto" controls style="display: none" id="'+index+'_sound"><source src="indexdata/sounds/'+value+'" type="audio/mpeg"></audio>'
    );      
    document.getElementById(index+'_sound').muted = false;
}); 

function playVideoSound(videoID) {
$.each(_videoSounds,function(index,value){
    $('#'+index+'_sound').trigger('pause');
});
$('#'+videoID+'_sound').trigger('play'); }

Immerse yourself in a world of virtual reality with the cutting-edge VR Vide

Answer №1

Similar questions

When trying to retrieve an XML file that contains an escaped ampersand, a jQuery AJAX call is throwing an error

The nth-child selector fails to function properly with a customized MUI component in CSS

Update MYSQL table values using AJAX and jQuery, then dynamically refresh the updated values on the web page

Show or conceal a class

Is there a way to access and troubleshoot the complete source code within .vue files?

Guide to developing a reusable component or partial in react.js

Flask fails to recognize JSON data when transmitted from Nodejs

Troubles with Geocoding functionality on Google Maps integration within Wordpress

Backend framework

Creating an Image Slideshow on Your Website

Execute the function once the audio has finished loading

Is there a method in bootstrap that reveals the elements with the hidden class?

JQuery Script Perform an Action - Pause - Execute Another Action

Simple steps to access a feature on an AngularJS application

Bot in Discord designed to provide varying tiered rewards for designated roles on payday

When toggling visibility with JS, the Bootstrap Grid Row may not center-align as expected

Pressing on an HTML element using JavaScript via the Selenium driver does not trigger the action

Tips for preventing the occurrence of a final empty line in Deno's TextLineStream

What is the process for transferring data between components in React?

Can you explain the concept of "Import trace for requested module" and provide instructions on how to resolve any issues that