Help needed to make timestamp buttons for annotation tiddlers of html video working

#1

I am trying to create a html video annotation set up using wikitext only. This is inspired by similar implementation by @telumire and @buggyj . I am using viewtemplate body cascade to use a video annotation template on tiddlers with video-location field.

I am almost reaching the final stage. Here is the share demo . Since I am using local video files, the video won’t play in the share demo. If you use local video filepath instead of the one in the demo, it will work for others also.

The issue I am facing is that the timestamp button for the annotation tiddlers is not getting displayed correctly in the viewtemplate when I am trying to transclude them via variable transclusion. I am not sure whether that is the way to go. Macro and viewtemplate tiddlers contain the relevant code.

If the concept is not clear from my description, please let me know

\procedure annotation-button-variable()
<<annotation-button>>
\end
<$let 
video-annotation-timestamp-text={{!!video-annotation-timestamp}}
video-annotation-action="""<$action-setfield video-timestamp=<<video-annotation-timestamp-text>> <<toggle-autoplay>>"""
annotation-button="""<$button actions=<<video-annotation-action>> ><<video-annotation-timestamp-text>></$button>"""
>
<table style="border: none;">
<tr>
<td style="width:50%; border: none;">
<<video-annotation>>
</td>
<td style="width:50%; border: none;">
<$list filter="[all[shadows+tiddlers]parent-video<currentTiddler>note-category[annotation]!is[draft]]" variable="list-video-annotations">
<$set name=annotation-tooltip value={{{ [<list-video-annotations>get[title]] }}} >
<$transclude $tiddler=<<list-video-annotations>> $variable="annotation-button-variable" /> 
<$transclude tiddler=<<list-video-annotations>> mode="inline"/> <$link to=<<list-video-annotations>> tooltip=<<annotation-tooltip>> > <$transclude $tiddler="$:/core/images/link" size="10px"/></$link> <br/>
</$set>
</$list>
</td>
</tr>
</table>
</$let>

Error must be in this code

#2

Very interested to see where this leads - could be very useful.

#3

I m not sure how to obtain a local video to put in place;

  • Do you manualy set the seconds ?

Notes;

  • The edit field looses focus,
  • fetal-imaging_face contains a field called <<toggle-autoplay which is clearly an error
  • I will look more
#4

I use tiddlyclip to get the relative path of the file…I think there is a copy filepath option in window options menu

I have to fix that. I didn’t go into code clean up and bug fixes. Only the basic framework is nearing final phase.

That’s something which got added accidentally on some button press. If the OP gets solved, I guess that error also will resolve

#5 
<$transclude $tiddler=<<list-video-annotations>> $variable="annotation-button-variable" />

Any idea what’s wrong with this part of the code shared above…this is responsible for transcluding the timestamp buttons

#6

I think I have solved many of the previous issues. Here is a share demo

image
image1780×972 110 KB

I took the sample video from this webpage (https://codepen.io/caraya/pen/nEgjKW) and is used for demo purpose only (since i use only local video files for annotation)

#7

@jonnie45 take a look at this demo…do you have any suggestions for improvement

#8

Very cool, you not only add annotation, but also control the video playback progress!

1 Like
#9

Hi,

Personally I would perfer the buttons for creating a new annotation were only visible when a setting perhaps in the plugin settings area was switched on. I annotate a lot of ‘lecture’ videos with annotations for various factual snippets and therefore watch quite a number of videos more than once combing through the highlights that I have already identified so when I am in pure view mode I would prefer least clutter. In addition many of my annotations are a few lines of text as I will want to add my own viewpoints to what the lecturer has said so would probably want annotations to appear under the video so as to have decent line length. But those are personal views other people will probably have a different viewpoint

Thanks for asking!

1 Like
#10

This is looking great, @arunnbabu81 and I am keen on using such a facility. A little more detail on how to use it, the workflow, such as play video, pause and manually set times and save etc… would help me evaluate it more fully.

If the time passed in the video can be accessed by wiki text it would be nice to have a click to pause and create annotation. click to restart and continue. But I have no idea if this is possible.

Such a feature can be used for at least two purposes,

  • one to annotate a video, like chapters so you can jump to the point in the video.
  • the other would be while playing the video have the annotations appear perhaps scroll as the times stamps pass.

Never the less it is already of great value.

#11

@jonnie45
I made some more modifications here

I made the annotation template visible only on a button press. Annotation time selection is made more detailed. I don’t have any documentation yet for easy usage. Also I wont recommend using this yet since I am yet to reach a satisfactory result. I guess as I use it more, I will be able to refine it more.

I also don’t know how to access the current time of the playing video.