Example of an OAC RDF file, being used in VoV demo
| Code Block | ||||
|---|---|---|---|---|
| ||||
<?xml version="1.0" encoding="UTF-8"?> <rdf:RDF xmlns:cnt="http://www.w3.org/2008/content#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dms="http://dms.stanford.edu/ns/" xmlns:exif="http://www.w3.org/2003/12/exif/ns#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:oac="http://www.openannotation.org/ns/" xmlns:ore="http://www.openarchives.org/ore/terms/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" > <rdf:Description rdf:about="urn:uuid:c437ff82-4081-4fad-a89c-1a8a3093c80f"> <rdf:type rdf:resource="http://dms.stanford.edu/ns/TextAnnotation"/> <rdf:type rdf:resource="http://www.openannotation.org/ns/Annotation"/> <oac:hasBody rdf:resource="http://vov.indiana.edu/demo1/Line-f1r-15"/> <oac:hasTarget rdf:resource="http://vov.indiana.edu/demo1/Canvas-f1r#xywh=73,83,240,135&t=npt:0,5"/> </rdf:Description> <rdf:Description rdf:about="http://vov.indiana.edu/demo1/Canvas-f1r#xywh=73,83,240,135&t=npt:0,5"> <rdf:type rdf:resource="http://dms.stanford.edu/ns/CanvasSegment"/> <dcterms:isPartOf rdf:resource="http://vov.indiana.edu/demo1/Canvas-f1r"/> </rdf:Description> <rdf:Description rdf:about="http://vov.indiana.edu/demo1/Line-f1r-15"> <rdf:type rdf:resource="http://purl.org/dc/dcmitype/Text"/> <rdf:type rdf:resource="http://www.w3.org/2008/content#ContentAsText"/> <dc:title>Video #1</dc:title> <cnt:chars>Cheerios Rocket kit</cnt:chars> <cnt:characterEncoding>UTF-8</cnt:characterEncoding> </rdf:Description> <rdf:Description rdf:about="urn:uuid:c437ff82-4081-4fad-a89c-1a8a3093c80z"> <rdf:type rdf:resource="http://dms.stanford.edu/ns/TextAnnotation"/> <rdf:type rdf:resource="http://www.openannotation.org/ns/Annotation"/> <oac:hasBody rdf:resource="http://vov.indiana.edu/demo1/Line-f1r-16"/> <oac:hasTarget rdf:resource="http://vov.indiana.edu/demo1/Canvas-f1r#xywh=23,53,200,145&t=npt:5,25"/> </rdf:Description> <rdf:Description rdf:about="http://vov.indiana.edu/demo1/Canvas-f1r#xywh=23,53,200,145&t=npt:5,25"> <rdf:type rdf:resource="http://dms.stanford.edu/ns/CanvasSegment"/> <dcterms:isPartOf rdf:resource="http://vov.indiana.edu/demo1/Canvas-f1r"/> </rdf:Description> <rdf:Description rdf:about="http://vov.indiana.edu/demo1/Line-f1r-16"> <rdf:type rdf:resource="http://purl.org/dc/dcmitype/Text"/> <rdf:type rdf:resource="http://www.w3.org/2008/content#ContentAsText"/> <dc:title>Video #2</dc:title> <cnt:chars>Felix and his Golden Goose</cnt:chars> <cnt:characterEncoding>UTF-8</cnt:characterEncoding> </rdf:Description> <rdf:Description rdf:nodeID="bCfJsWeh175"> <rdf:first rdf:resource="urn:uuid:c437ff82-4081-4fad-a89c-1a8a3093c80f"/> <rdf:rest rdf:nodeID="bCfJsWeh185"/> </rdf:Description> <rdf:Description rdf:about="http://vov.indiana.edu/demo1/Canvas-f1r"> <rdf:type rdf:resource="http://dms.stanford.edu/ns/Canvas"/> <dc:title>M804 f1r</dc:title> <exif:width rdf:datatype="http://www.w3.org/2001/XMLSchema#integer">480</exif:width> <exif:height rdf:datatype="http://www.w3.org/2001/XMLSchema#integer">270</exif:height> </rdf:Description> </rdf:RDF> |
W3C Media Fragment is being used here to specify the start/end time and the spatial area of interest (bubble note).
| Code Block | ||
|---|---|---|
| ||
<rdf:Description rdf:about="http://vov.indiana.edu/demo1/Canvas-f1r#xywh=73,83,240,135&t=npt:0,5"> |
Placement of the "bubbles" are relative to the video size
| Code Block | ||
|---|---|---|
| ||
<exif:width rdf:datatype="http://www.w3.org/2001/XMLSchema#integer">480</exif:width> <exif:height rdf:datatype="http://www.w3.org/2001/XMLSchema#integer">270</exif:height> |
If the video is rendered at a different size then the bubbles will have to be resized / re-placed accordingly.
With RDF annotations, it's possible to fetch annotation resource from a different location. For example: overlaying a Flickr image on top of a video.
With Constrained Targets, it's also possible to do complex annotations like a polygon or an SVG. See list of known constraints.
The OAC file is fetched via AJAX and turned into Javascript objects using a custom library. Annotations are then overlaid on top of the video using our video player.