mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.22k stars 716 forks source link

use single video player to play both VR and non-VR video #1018

Open uniquejava opened 3 years ago

uniquejava commented 3 years ago

Hello,

Thanks for this awesome vr player.

In our project, we need to play both vr and non-vr(normal) mp4 videos.

I'd like to use a single page which has a single <video> host element to handle both types of videos, but I found that pannellum cannot play normal videos.

Is there an API that I can use to activate and deactivate this plugin on the fly according to the type of video, so that it can play all kinds of videos in my playlist.

     let plugins = {
        pannellum: {
          dynamic: true,
          compass: true,
          // hotSpotDebug: true,
        },
      }

      player = videojs(playerId, {
        controls: true,
        html5: {
          nativeTextTracks: false,
        },
        plugins,
      })

    // activate and deactivate this plugin on the fly based on video type.
     if(isVr){
         player.activate(pannellum)
     } else {
        player.deactivate(pannellum) 
    }
     player.src(url)

Previously, I use 2 <video> host elements on the page, one is for handling non-vr videos(with only videojs), the other is for vr videos(with pannellum), and use z-index to control which player to display. This worked well at first, but when user toggle fullscreen, the z-index cannot easily be managed. and I found it's tricky to synchronize the fullscreen status between these two players. And then I wish there were just one player instance that can handle both kinds of videos.

Is this possible?

mpetroff commented 3 years ago

You should be able to modify the Pannellum Video.js plugin to work as you describe. I haven't tried to do so, but gating all the plugin's player.on() event handler functions behind a flag to not do anything when there isn't a panoramic video and setting pnlmContainer.style.visibility = 'hidden' when loading a non-panoramic video will probably work.