HTML5 Video player doest not show markers tip on live server. Its working fine on localhost.

[fahedusmanrana]

I have created a script for interactive video and I got some requirements to show markers in the process bar of video. I worked on that and it works perfectly on localhost but when I put it live, only markers are showing. The text with those markers is not showing. I have searched everywhere on google and lot on videojs guides but I am not able to fix it. Below is my code for creating markers:

<video width="100%" controls id="sgm_2" class="video-js vjs-default-skin" preload="auto">
                        <source src="video.mp4" type="video/mp4">
                        <source src="video.webm" type="video/webm">
                        <p class="vjs-no-js">Your browser does not support HTML5 video.</p>
                    </video>

var player = videojs('sgm_2');
            player.markers({
                markerTip:{
                    display: true,
                    text: function(marker) {
                        return marker.text;
                    },
                    time: function(marker) {
                        return marker.time;
                    }
                }
            });
            player.markers.reset([
                {
                    time: 10,
                    text: "Caption 1"
                },    
                {
                    time: 20,
                    text: "Caption 2"
                },
                {
                    time: 30,
                    text: "Caption 3"
                },
                {
                    time: 40,
                    text: "Caption 4"
                }
            ]);`

Can anyone please check what is the thing I am missing or what is wrong with this code? I have also used the funcltion of add instead of reset markers but no luck. I will appreciate any help.

Thank you.

[spchuang]

Hey, I"m happy to help.

Could you create a jsbin so I can debug it more closely online? Thanks

[karan101292]

same here. markers are not showing after hosting. its working on localhost.

player = videojs('my-video');
player.on('ready', function(){
    $http.get('questions/markers.json').then(function(response){
        makeModalData(response.data);
        player.markers({
            markers: response.data,
            onMarkerReached: function (marker, index) {
                player.pause();
                openModal(marker.id);
            }
        });
    },function(error){
        debugger;
    });
});

Markers are coming from server.

[spchuang]

@karan101292, can you help create an example jsbin so i can repro online and debug?