spchuang / videojs-markers Goto Github PK

Hello!

It seems that the marker are not being updated on #reset call.

My markers are being created like this:

const player = window.player = window.videojs([my video conf here]);

player.markers({
   onMarkerReached: (marker) => {
      setAnnotationVisibility(marker.annotationRef, visibility);
   },
   markers: markers
});

setAnnotationVisibility is my callback function
annotationRef is a custom attribute

When loading a second video, I set video src (as usual) and update the markers with the following call:

// "markers" is an array of markers
player.markers.reset(markers)

However, even ensuring that the new markers are being passed correctly to #reset function, the old markers are still there, and the new ones are just ignored.

Am I doing something wrong here?

Thanks!

I'm working on a project where i need to add markers from a json array. However adding markers dinamycly is not possible. This is my code:

player.markers({
    markers: []
});

if(bookmarks_array.length !== 0){
    bookmarks_array.forEach(function(bookmark) {
        console.log(bookmark);

        var color_bookmark = "";

        if(bookmark.public == true){
            color_bookmark = "green";
        }else{
            color_bookmark = "blue";
        }

        player.markers.add({
            markers: [{
                time: bookmark.postion,
                text: bookmark.content,
                class: color_bookmark
            }]
        });

    });
}

The error i'm getting is:

VIDEOJS: ERROR: TypeError: Cannot read property 'time' of undefined
at Object.time (/js/video-js/videojs-markers/videojs.markers.js:17:22)
at e.onTimeUpdate (/js/video-js/videojs-markers/videojs.markers.js:251:45)
at HTMLDivElement.r (/js/video-js/video.min.js:2:378)
at HTMLDivElement.U.r.dispatcher.r.dispatcher (/js/video-js/video.min.js:1:6923)
at X (/js/video-js/video.min.js:1:7602)
at e.trigger (/js/video-js/video.min.js:2:2969)
at e.so.(anonymous function) [as handleTechTimeupdate_] (/js/video-js/video.min.js:6:17654)
at e.r (/js/video-js/video.min.js:2:378)
at HTMLVideoElement.r (/js/video-js/video.min.js:2:378)
at HTMLVideoElement.U.r.dispatcher.r.dispatcher (/js/video-js/video.min.js:1:6923)

Sometimes i also get the error that the function "player.markers.add" does not exists. Any suggestions at what i'm doing wrong?

Getting this errors
in the example given
TypeError: _video2.default is undefined
videojs-markers.js:466:3

TypeError: player.markers is not a function
[Learn More]

If I try to add a marker with break greater than a max video time, marker is placed at the beginning of video. I'd expect the marker won't be placed anywhere.

Hi,
I'm developing a solution based on SPA that need to use markers plugin. Unfortunately, there is no way to destroy marker that already added in the videojs.
Do you have any idea? I have developed a version for my own that support to set the parameter as a string to indicate that destroy the markers, and would like to make a pull request to this repo as well.

Dear Spchuang,

Your plugin is great.

I have used it to study some video programming classes where I type in the IDE which is given in class video.
So, how to do, if possible, to insert a pause time in video on breakpoints ?

Is to watch part of the video, in the breakpoint the video pauses and I go type in IDE and then back to the video. Then, I could set a pause, for example, 30 secs at first breakpoint, 60 secs at second, etc...this would be more efficient for my class.

Brazil keepsakes for you.
Thanks so much.
André

Thanks for writing this plugin, it's saved me a lot of time!
Just a couple of issues.

• In your demo, adding a marker does nothing except on occasions where it adds a marker towards the end of the video.
• Clicking "remove" seems to remove all markers except a couple.

tested on latest version of Chrome and Firefox with same result.

Thanks again :)

I guess it looks like you updated how your plugin is called at some point which has caused your demos to all stop working. Here's a fixed jsbin version http://jsbin.com/goloyekevu/2/edit?html,output you may want to look into what broke your demo page though.

Hi I am able to use the marker plugin successfully for video playback on page load / refresh. However when I use a upnext playlist to load new videos after the first one plays, the second video onwards the markers do not remove the previous video's markers from the DOM and view and the markers add up to the previous ones in the DOM. Although options.markers that is fed into addMarkers has the correct length when the second video from playlist loads.

Any help will be appreciated.

When loading video via the youtube plugin, only the last marker in the array is showing, and it is placed at the very beginning of the progress bar:

markers work when loading non-youtube video sources.

Any advice?

HI, the option display not turning the markers invisible when set to false...

Is it possible to have marker length according to start time and endtime of marker? If yes then how?

When I use 'npm install videojs-markers' and 'yarn add videojs-markers', it will miss dist folder in node_modules/videojs-markers.

If I initialize the plugin without any markers, it gives me error:

VIDEOJS: ERROR: TypeError: Cannot read property 'forEach' of undefined
at addMarkers (videojs-markers.js:147:17)
at initialize (videojs-markers.js:389:11)
[...]

I think the solution would be to check if there is a marker present in the initialize() function:

if (setting.markers.length) {
    addMarkers(options.markers);
}

I'am planning to add markers later; for chapters based on the chapter track.

Is it possible to show multiple markers and their hover tips at once?

Setting displayTime doesn't work. From the time of reaching the associated marker, the overlay will be displayed indefinitely or until the start time of the next marker. This is the case for videojs 5 at least, haven't tried with previous versions.

Removing the prefixes to read movementX and movementY should do the trick. I don't think any browser should require the webkit prefix but if this is the case you could make this a conditional.

While testing the 'Dynamic video' example, I noticed that, if I click between the markers on the progress bar, the markers are not considered to be reached. Actually sometimes they are and sometimes they're not. Mostly not.

Would be great if the reached markers detection would work without any error between them as well. Consider a simple menu with some so called 'chapter' buttons which should be correlated with the markers and which should be styled differently when their corresponding "chapters" are played, even if the chapter was changed by clicking between markers on the progress bar. It doesn't look very well to have the 'Chapter 1' button styled as active while the user just jumped to 'Chapter 4'.

I tried to install this plugin using npm install videojs-markers, but got the following error:

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/videojs-markers
npm ERR! 404 
npm ERR! 404  'videojs-markers' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

Are you able to publish it, please?

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.

Currently the array index of the marker_breaks iteration is used as the id of the marker <div class='vjs-marker'> element, resulting in HTML elements with id=0, id=1, etc.

This has the potential to conflict with other IDs on a page, particularly if more than one videojs player with markers is present.

A unique ID should be used for the marker element.

I'am trying to get the current marker and add a custom class or style to it without jQuery.
How can I do that? I think the onMarkerReached callback is not enough for that.

onMarkerReached: function(marker, index) {
	//style the current marker
}

Can you integrate this feature? For example add a vjs-marker-current class to the current marker element.
Or this class could be defined in the settings for each marker, or globally: currentClass: 'vjs-marker-current'

hi
When i use the marker. Markers are getting displayed. But i am not able to move the cursor on the controls.

Regards

For easier demoing. http://jsbin.com/axedog/9999/edit

As i have tried in playing iphone chrome and safari browser it does not work. When i tap on markers it just shows information of chapter but it does not seek to that chapter.

I am trying to use this plugin with vuejs (more precisely, my vuejs code is based on the vuejs-cli template). So after I installed the source code of videojs-markers through "npm install videojs-markers --save", I tried to import both the css and js files of videojs-markers:

import "videojs-markers/dist/videojs.markers.css";
import "videojs-markers/dist/videojs-markers.js";

But it does not work. So is there anybody who have the same issue with me? What should I do? Thanks.

Hi,

I see on the example that it is possible to customize the marker by setting CSS markerStyle.

How could I do the same for the markerTip? I would like to change the background color and size.

Thanks,
Fernando

Hi. In your link
"JSBin Demo can be found here" - http://jsbin.com/vifilen/1/edit I don't see markers
But see many errors in Chrome console:
fs.js:36 Dave is ready.
fs.js:36 To edit settings, type this string into the console: octuc0tapclg
fs.js:72 XHR finished loading: POST "https://rs.fullstory.com/rec/page".
c.post @ fs.js:72
c.start @ fs.js:192
c.createRecorder @ fs.js:210
c.start @ fs.js:209
c.init @ fs.js:202
(anonymous) @ fs.js:215
(anonymous) @ fs.js:215
jquery-1.11.0.min.js:4 XHR finished loading: GET "http://jsbin.com/blog/all.json?Tue-Nov-21-2017".
send @ jquery-1.11.0.min.js:4
ajax @ jquery-1.11.0.min.js:4
(anonymous) @ jsbin-4.1.1.min.js:31
start @ jsbin-4.1.1.min.js:31
(anonymous) @ start.js?d32b:1
runner:26 Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
(anonymous) @ runner:26
Promise (async)
(anonymous) @ runner:26
runner-4.1.1.min.js:1 d[ o_0 ]b
jquery-1.11.0.min.js:4 XHR finished loading: GET "https://app.codesponsor.io/p/JoMssLSjQuR8acFXk_Lftw/message.json".
send @ jquery-1.11.0.min.js:4
ajax @ jquery-1.11.0.min.js:4
(anonymous) @ edit?html,js,output:603
runner-4.1.1.min.js:1 Script error. (line 0)
videojs-markers.js? [sm]:464 Uncaught TypeError: _video2.default.registerPlugin is not a function
at videojs-markers.js? [sm]:464
at videojs-markers.js:10
at videojs-markers.js:13
(anonymous) @ videojs-markers.js? [sm]:464
(anonymous) @ videojs-markers.js:10
(anonymous) @ videojs-markers.js:13
runner-4.1.1.min.js:1 error TypeError: video.markers is not a function
at http://null.jsbin.com/runner:7:9
runner:7 Uncaught TypeError: video.markers is not a function
at runner:7

Demo from zip archive have same problem:
"Uncaught TypeError: _video2.default.registerPlugin is not a function
at videojs-markers.js:466
at videojs-markers.js:10
at videojs-markers.js:13
example-block-seeking.html:52 Uncaught TypeError: player.markers is not a function
at example-block-seeking.html:52"
And no markers has appearing

Hi,
I want to change the color of the marker when it is clicked or reached. Is it possible?

According to this article:

Array.ForEach is about 95% slower than for() in for each for Arrays in JavaScript.

Is it possible to show a thumbnail instead of just text?
Something like:
https://github.com/brightcove/videojs-thumbnails

Hello ,

I need to add a marker following the scene selected inside the player (not depeding of the javascript time)

$(".add").click(function(){
player.markers.add([{
time: 25, // I don't know wich time I need bu implement it depeding the what I selected inside the player
text: "marker"
}]);

Exemple here 👍
https://www.hostingpics.net/viewer.php?id=252248Sanstitre.png

Is there anyway to do it ?

Thanks

Hello everyone!
I'm trying to figure out why markers are not loading when videojs is loaded inside a modal window (boostrap), the problem is like the following:
i made two buttons, each of them load a diferrent video source and markers, when click on the first one load video and markers right but click on the second button just load video and not markers.
here its the error i get in the second click: Uncaught TypeError: videojs(...).markers is not a function.

here its a small demo:

https://jsfiddle.net/Pomer/3ecuzj98/6/

Anyone can figure what im doing wrong? thx !

There can sometimes be issues in registering the marker plugin if videojs is not loaded through conventional means.

For example, if videojs is loaded using a dojo require then videojs is undefined and it can be difficult to force the timing of the load of the marker plugin to occur just after videojs has loaded.

It would be nice if the marker plugin checked that videojs is loaded and if not, waited until it is before registration.

Unrelated to the registration of the plugin, there can also be cases where the loadedmetadata event is 'missed', or does occur but for some reason videojs hasn't completed its setup by the time marker creation is attempted and player.duration() still returns '0'.

I believe I've seen this on the demo site of the plugin itself.

It would be nice if the marker plugin allowed an option to force initialization immediately rather than binding to loadedmetadata and checked player.duration() waited for a real value if zero.

Is this on the roadmap at all?

I have a question to ask you that videojs play source with rtmp type I can't get the video rangetime.The currenttime unit is ms？？？

Hey there,

Thanks for such an awesome tool that you have built. I am currently using VideoJS for playing audio files. And I am wondering whether your marker tool would work for audio tag? (reference: http://blog.videojs.com/Video-js-4-9-Now-can-join-the-party/)

Thanks!

I would need to create video js ad markers and pretty much the very functionality this plugin covers already. However the player project code I am working on does not use jQuery and was wondering if there is a version of videojs-markers that can work without jquery?

Hi @spchuang. We have just undergone a major rewrite of our player that moves away from video.js. Unfortunately, this means that it's going to be hard to keep up with the issues on this repo and fix them. :-\ Would you mind removing me as a collaborator?

Hi:)
Sorry to post it here, since it is not actually an issue with the plugin itself.
I just wanted to tell you that the website (http://sampingchuang.com/videojs-markers) is not working and the documentation was really usefull por me

Thanks a lot for your work! Its quite good!

I am having some problems when trying to use videojs-markers combined with videojs-youtube.
Did you tested this? Is it possible?

I implemented a coed in which I needed to block seeking beyond a marker. It was fully working on chrome, but when I tested it on firefox, it didn't work. The reason is that "onMarkerReached" event is fired before "seeking" event and so I cannot check whether it has been called while playing or seeking.

This appears in the js console the moment the video ends playback for the first time using videojs 5. Restarting the video again makes these messages accumulate on a continuous basis. Full output in the console (Chrome):

Uncaught TypeError: Cannot read property 'time' of undefined in videojs-markers.min.js:3

As in title, markers don't seem to show on the slider in Chrome this is just looking at your demo page, I haven't actually started using the code yet because of this issue.

I also notice the styling is missing in chrome (non-black control bar)

Any ideas? :) Thanks for your work on this.

Hi,

I have problem with showing markers in Mozilla Firefox.
I have noticed that "loadedmetadata" event never happens.
player.on("loadedmetadata", function () { initialize(); });

My current fix for that is next:

if ($.browser.mozilla) {
        player.ready(function(){
        	initialize();
        });
}
else{
      player.on("loadedmetadata", function () {
    	  initialize();
      });
}

Is there better way how to solve that? I don't like that I'm changing source of the plugin.

Also in Firefox only third example on this link is showing markers? What is different between first two and third example?