Hotspots when using Pannellum with Video.js

[needsmorecoffee]

When using the pannellum videojs plugin, is it possible to add hotspots to a video scene and have them visible and interactable (e.g. draggable) while the video is paused or playing or is this out of the scope of the library?

[Matthew Petroff]

Yes, it's possible (except for scene hot spots, which won't work). Starting with the video example, if you replace the contents of the <script> block with:

var myPlayer = videojs('panorama', {
    plugins: {
        pannellum: {
            "hotSpots": [
                {
                    "pitch": 14.1,
                    "yaw": 1.5,
                    "type": "info",
                    "text": "example hot spot"
                }
            ]
        }
    }
});

you'll have a hot spot. The contents of pannellum: {...} are used to initialize Pannellum after some minor modifications, so most configuration parameters can be passed as normal.

[needsmorecoffee]

Thanks Matthew! Should have been obvious for me to try that! I looked a bit closer and saw I could also get the pannellum viewer object through the videojs player object once it was initialised so I ended up using that to dyanmically add and remove hotspots instead of only during initialisation.

One thing I did notice was the tooltips for hotspots on video don't seem to be laid out as well but that could be something on my side.