xapi-videojs/index.html at master · mrik974/xapi-videojs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js + xAPI Video Profile Example - Ocean Life mp4, webm, ogv</title>
    <link href="video-js-6.1.0/video-js.css" rel="stylesheet">
    <script src="video-js-6.1.0/ie8/videojs-ie8.min.js"></script>
    <script src="video-js-6.1.0/video.js"></script>
    <script type="text/javascript" src="xAPIWrapper-1.10.4/src/xapiwrapper.js"></script>
    <script type="text/javascript" src="xAPIWrapper-1.10.4/lib/cryptojs_v3.1.2.js"></script>
    <script type="text/javascript" src="xapi-videojs.js"></script>

</head>

<body prefix="dcterms: http://purl.org/dc/terms/">

  <div id="vidtitle" property="dcterms:title" content="Ocean Life"></div>
  <div id="viddesc" property="dcterms:description" content="A short video clip of ocean lifeforms, used by videojs.com as part of their demo."></div>

  <video  id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    <track kind="captions" src="captions/example-captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="captions/example-captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>


<script type="text/javascript">

    // This line limits the number of logs in your console...
    ADL.XAPIWrapper.log.debug = false;

    // ADL LRS Configuration - Basic Auth for demo purposes
    if(ADL.XAPIWrapper.lrs.auth == undefined) {
        var conf = {
           "endpoint" : "https://lrs.adlnet.gov/xAPI/",
           "auth" : "Basic " + toBase64('video-profile:getout'),
           "actor" : '{"mbox": "mailto:jlh@example.com","name": "Video User","objectType": "Agent"}'

        //   "endpoint" : "https://video_profile_testing.lrs.veracity.it:443/xapi/",
        //   "auth" : "Basic " + toBase64('700aead5daad4f619cd0d420477befd5:68438912e2b4450d8dc400698b20398f'),
        //   "actor" : '{"mbox": "mailto:someuser@example.com","name": "Video User","objectType": "Agent"}',

        };

        ADL.XAPIWrapper.changeConfig(conf);
    }

    // Force the player to use a specific IRI as the activity ID.
    // If not, the player uses the video source URL.
    // var activityId = "http://here-is-my-video-activity-iri";

    // put into variables - title and description from the metadata DIV above the video element
    var activityTitle = document.getElementById('vidtitle').getAttribute('content');
    var activityDesc = document.getElementById('viddesc').getAttribute('content');

    ADL.XAPIVideoJS("vid1");


</script>

</body>

</html>