video.js end Annotation Plugin

assistenzasoin

C'è una demo del plug-in di annotazioni nella prossima pagina web:

https://gteavirtual.org/ova/index.php?r=site/page&view=explore

Plugin di annotazione

Annotations.js è un plugin per Video JS player. Lo scopo di questo plugin è creare annotazioni in video-js.

Installazione

Per utilizzare lo strumento è necessario installare il plug-in video player-js , plug rangeslider per il video-js e il plug-Annotator per annotare testo e video.

Inoltre aggiungi annotations.min.js e annotations.min.css file distribuito CDN sul tuo head tag, subito dopo videojs:

        < head >                 <! - Annotator ->                 < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" > </ script > < script src = " http://assets.annotateit.org/ann ... notator-full.min.js " > </ script > < link rel = " stylesheet " href = " http://assets.annotateit.org/annotator /v1.2.5/annotator.min.css " >                 <! - video-js ->                 <link href ="http://vjs.zencdn.net/4.1/video-js.css" rel = "stylesheet" > < script src = "lib / video-js / video.min.js" > </ script >                 <! - -RangeSlider Pluging ->                 < script src = "lib / rangeslider.min.js" > </ script > < link href = "lib / rangeslider.min.css" rel = "stylesheet" >                 <! - Annotations Pluging- ->                 <script src = "build / annotations.min.js" > </script > < link href = "build / annotations.min.css" rel = "stylesheet" > </ head >
uso

Carica tutti i video in video-j con id diversi, come puoi vedere nel tutorial di video-js player

< video id = "vid1" class = "video-js vjs-default-skin" controlla preload = "none" width = "640" height = "264" poster = "http://video-js.zencoder.com/ oceans-clip.png " data -setup = '' > < source src = " http://video-js.zencoder.com/oceans-clip.mp4 " type = 'video / mp4' /> < source src = " http://video-js.zencoder.com/oceans-clip.webm" type = 'video / webm'/> < source src = "http://video-js.zencoder.com/oceans-clip.ogv" type = 'video / ogg' /> </ video >

Per caricare e controllare il plugin da Javascript devi selezionare il

con il contenuto da annotare. Inoltre aggiungi il plugin al videojs, come segue:
< script >         var options = {optionsAnnotator : {user : {}, store : {}}, optionsVideoJS : {}, optionsRS : {}, optionsOVA : {posBigNew : 'ul ' },}         // Aggiungi l'ID div da annotare per Annotator. Nel demo.html anche l'id è "airlock".         var ova = new OpenVideoAnnotation.Annotator ( $ ('#airlock' ), opzioni);                // (opzionale) Imposta la configurazione per gli utenti         ova. setCurrentUser ( $ ( '#username' ). val ());        $ ( '#nomeutente' ). change ( function () {ova. setCurrentUser ( $ ( this ). val ());});        < / script >

Le opzioni iniziali per le annotazioni sono la posizione del pulsante per le nuove annotazioni:

posBigNew (opzioni):

• ul (in alto a sinistra) -di default-
• ur (in alto a destra)
• bl (in basso a sinistra)
• br (in basso a destra)
• c (centro)
• none (without button)
  

NumAnnotations: it is the number of Annotation that will be load in the display. The other annotation will be hide under the scroll. (By default: 16)

URl API to preload an annotation

This plugin allow to share an annotation with two methodologies:

The first method will send a stored annotation in the database (ToDo)

The second method will send a new isolated annotation that is not in the database. The code to share a annotation with this method is:

http://url-with-the-video.com/?ovaSrc=(Source)&ovaContainer=(ContainerID)&ovaStart=(Start)&ovaEnd=(End)&ovaText=(Text)&ovaUser=(User)

All the values between brackets must be replaced by the real value.

The obligatory values are:

• ovaSrc = source where is the video. For example, in the demo video with this plugin the source is in: http://video-js.zencoder.com/oceans-clip.mp4
• ovaContainer = the id where we had put the video. In the demo is vid1
• ovaStart = the time to start the video
• ovaEnd = the time to end the video
  

The optionals values are:

• ovaText = the text that the user will see.
• ovaUser = the user who has sent the annotation
  

Caution, all these variables must be ready to be in a URL link and take care of special characters like &()#/. To do this, we can parse the string with decodeURIComponent().

API Methods to take control of the plugin

Once the plugin is started and the DOM readed, we can control the Open Video Annotator giving the id of the video in the html. It is possible to use the following functions:

newVideoAn(VideoID)

Crea una nuova annotazione video. VideoID è l'ID in html per il video. Nell'esempio demo è 'vid1'.

        ovuli. newVideoAn ( 'divID' );
showDisplay (ID video)

Mostra la visualizzazione delle annotazioni

        ovuli. showDisplay ( 'divID' );
hideDisplay (ID video)

Nasconde la visualizzazione delle annotazioni

        ovuli. hideDisplay ( 'divID' );
setposBigNew (VideoID, posizione)

Imposta la posizione del nuovo pulsante di annotazione grande. I valori per la posizione di ingresso sono:

• ul (in alto a sinistra) -di default-
• ur (in alto a destra)
• bl (in basso a sinistra)
• br (in basso a destra)
• c (centro)
• nessuno (senza pulsante)
  

        ovuli. setposBigNew ( 'divID' , posizione);
playTarget (annotationId)

Esegui un'annotazione utilizzando l'ID annotazione, come nell'esempio seguente:

        ovuli. playTarget ( '8I2NBkJbQoeF3-bqgpcwTw' );