how can i use the hotspot functions of videojs-panorama?

[ssalbal]

Can i use hotspot text and image. Panorama HotSpot Support description. How can i use the hotspot function.?

[yanwsh]

yes,

Here are the example code, please download beta version here. You can use both image and text,

For image, please parse dom to element.

Like

 element:  document.getElementById("hotspot")

 Markers: [
                {
                    location: {
                        lat: 0,
                        lon: 180
                    },
                    radius: 500,
                    element: "This is text 1 with long text"
                },
                {
                    location: {
                        lat: 20,
                        lon: 160
                    },
                    radius: 500,
                    element: "This is text 2 with long text",
                    onShow: function(){
                        console.log("text 2 is shown");
                    },
                    onHide: function(){
                        console.log("text 2 is hidden");
                    }
                }
            ]

[ssalbal]

hotspot does not same to Markers. could you more detail example code?

[yanwsh]

Could you explain how does it looks like?

[ssalbal]

I just insert element & Markers to player.panorama options like below code. But, no text find on the video. I have to write more html5 hotspot code?

    player.panorama({
        clickToToggle: (!isMobile()),

        clickAndDrag: true,
        autoMobileOrientation: true,

        initFov: 100,  
        VREnable: isMobile(),

        NoticeMessage: (isMobile())? "please drag and drop the video" : "please mouse drag and drop the video",
        autoHideNotice: 3000, 

        element:  document.getElementById("hotspot"),
        Markers: [
            {
                location: {
                    lat: 0,
                    lon: 180
                },
                radius: 500,
                element: "This is text 1 with long text"
            },
            {
                location: {
                    lat: 20,
                    lon: 160
                },
                radius: 500,
                element: "This is text 2 with long text",
                onShow: function(){
                    console.log("text 2 is shown");
                },
                onHide: function(){
                    console.log("text 2 is hidden");
                }
            }
        ],

[yanwsh]

Does it showing any console error?

[ssalbal]

Yes. thereis no console error.

Just Got Warning Console log. VIDEOJS: WARN: videojs.plugin() is deprecated; use videojs.registerPlugin() instead.

assets/shark.mp4 panorama view well.

I'm using video.js ( Ver. 6.2.1) / three.js (Ver r75) / videojs-panorama.v5.js (Ver 1.0.0-beta)

Also tested with video.js(Ver 5.20.1). the result same - no hotspot text. no console error.

[ssalbal]

Also I'm using O.S - Windows 7 , Browser - Chrome (Ver 59.0.3071.115)

[yanwsh]

Could you send me your project files or send me a demo, so i can figure out what's wrong.

[ssalbal]

yes. demo link here

It's just some modified index.html of videojs-panorama original file.

[yanwsh]

Hey, looks like you are not use beta version. Only beta version support hotspot right now. Please download code here.

[ssalbal]

it's my mistaken.. it is well display text hotspot with beta version. could you let me know, how to control hotspot "text size" "text color" and display image with text. also can i use clickable image with url link?

[yanwsh]

If you right click and open console, you can see all the text showing on video is html dom, so you can add css code to change it.

        .vjs-marker{
            white-space: normal;
            width: 100px;
            font-size: 2em;
        }

[ssalbal]

it was really big helpness to me. thanks to your help.

[Vishnuvarth]

Can you provide any example of working with image hotspot...!