forked from interaktivideo/interaktivideo.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
121 lines (116 loc) · 12.5 KB
/
index.html
File metadata and controls
121 lines (116 loc) · 12.5 KB
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
</head>
<body>
<div layout-padding layout="column" class="partialContent">
<h3>Verktøy for produksjon av interaktiv video</h3>
<p>Det finnes flere verktøy for produksjon av interaktive videoer. Prismessig varierer de fra å være gratis til å være ganske kostbare.
Rapt Media koster for eksempel $7200. Selv om Rapt Media muligens er bra, så utelukkes det pga prisen. Noen programmer har forskjellige
priser basert på antall videoer. <br><br>Jeg har sett på verktøy som enten er gratis eller noenlunde rimelige. Funksjonalitet
er et annet kriterium. De skal kunne utføre de ønskede operasjonene og de skal ha et for meg et forståelig brukergrensesnitt.
<br><br>For de fleste programmene betyr interaktivitet i video i praksis navigasjon. Enten innen videoen, mellom videoer eller lenking til
eksterne websider. For H5P betyr interaktivitet interaksjon i en video, men det er til gjengjeld en interaksjon som kan
aktivere brukeren.<br><br> Under følger en gjennomgang av noen programmer som jeg på forhånd antok kunne oppfylle
de overnevnte kriteriene. I tillegg presenteres noen andre funksjonaliteter utenom interaktivitet i video som tilbys av H5P.</p>
<h3>Adventr</h3>
<iframe src="http://www.adventr.tv/embed.html?source=embed&load=0&poster=http://s3.amazonaws.com/static.theochre.com/clients/yngve-refseth-uv-uio-no-3053/13664/thumbnails/youtube3-2fze_poster_0000.png&width=640&height=360&x=http://static.theochre.com/clients/yngve-refseth-uv-uio-no-3053/13664/published/yngve-refseth-uv-uio-no-3053-relekvant-50193576.data&altMp4=http://s3.amazonaws.com/static.theochre.com/clients/yngve-refseth-uv-uio-no-3053/13664/youtube2-lrd1-mobile.mp4" width="640px" height="360px" frameborder="0" style="overflow:hidden" scrolling="no" allowFullscreen></iframe>
<enable-read-more label="Om Adventr"><h4>Vel enkelt program</h4>
<ul><li>Programmet er browserbasert. Få videoklipp= gratis. Flere klipp=betal.</li>
<li>Videoene lastes opp i en sky <br><strong>Fordel:</strong> Slipper videoserver.<br> <strong>Ulempe:</strong> Mister kontrollen over materialet.</li>
<li>Gratisløsningen har reklame på posterframe som umulig å bli kvitt</li>
<li>Navigasjon i trestruktur</li>
<li>Meget begrensede redigeringsmuligheter</li>
<li>Stygge, store knapper</li>
<li><strong>Fordel:</strong> Videoen stopper når den er ferdig. Knappene står fast</li>
<li>Sluttprodukt: Url embedded i iframe.</li>
</ul></enable-read-more>
<h3>Youtube enkel</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AcEyKXryZv0?rel=0&showinfo=0&controls=1&&start=1&end=42&loop=0" frameborder="0" allowfullscreen></iframe>
<enable-read-more label="Om Youtube enkel"><h4>Et vell av funksjonalitet</h4>
<ul><li>Programmet er browserbasert. Gratis. Ubegrenset antall</li>
<li>Videoene lastes opp i en sky<br><strong>Fordel:</strong> Slipper videoserver.<br> <strong>Ulempe:</strong> Mister kontrollen over materialet.</li>
<li>Navigasjon i trestruktur</li>
<li>Kan ikke programmeres til å stoppe/gå i pausemodus på ønsket sted.</li>
<li>Videoen stopper ikke når den er ferdigspilt men vender tilbake til start.</li>
<li>Eventuelle lenker må trykkes på mens videoen spilles eller settes i pause manuelt.</li>
<li>Kan omgås ved å opprette spilleliste hvor lenkene er i den påfølgende videoen.</li>
<li>Kan bare linke til egen video eller andre YouTube-videoer.</li>
<li>Kan lage en lang video bestående av mange klipp og bruke kapitel-inndeling. Da kan man hoppe både framover og tilbake.</li>
<li>Kapitel-inndelingen kan være i tekst-form under videoen. Men da må man se videoen på YouTube, ikke på websiden</li>
<li>Kan ikke linke til eksterne nettsider.</li>
<li>Annotasjoner/lenker er basert på Flash og virker bare på desktop-maskiner, ikke Iphone, Ipad, Android.</li>
<li>Kan visstnok skreddersy knapper for navigasjon utenfor YouTube. Disse er i HTML5 og dermed virke på Iphone, Ipad, Android.
(Prøvde å finne ut me om dette uetn hell).</li>
</ul></enable-read-more>
<h3>Youtube spilleliste</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EkokcKC3sto?rel=0&list=PLD35bEhWC1CBZIizjxr5g_MOZx_4tK89f" frameborder="0" allowfullscreen></iframe>
<enable-read-more label="Om Youtube spilleliste"><ul><li>Kan lenke til andre videoer innen samme spilleliste, men den framstår da som frittstående video og ikke som en del av spillelisten.</ul></enable-read-more>
<h3>Treehouse</h3>
<iframe width="568" height="320" src="https://v.interlude.fm/embed/zGK1gz?publisherID=W25sZz" frameborder="0" allowfullscreen></iframe>
<enable-read-more label="Om Treehouse"><h4>Treehouse fra Interlude.</h4>
<ul><li>Programmet er browserbasert. Gratis</li>
<li>Videoene lastes opp i en sky<br><strong>Fordel:</strong> Slipper videoserver.<br> <strong>Ulempe:</strong> Mister kontrollen over materialet.</li>
<li>Navigasjon i trestruktur</li>
<li>Import av egen grafikk</li>
<li>Designe egne knapper</li>
<li>Legge på skriftlig info</li>
<li>Linke til sider utenfor videoene</li>
<li>Ulempe: Videoen stopper ikke når den er ferdig. Knappene forsvinner i siste del av videoen.<br> Har synlig timer
som viser tiden du har til rådighet til å navigere. Tiden kan endres slik at hurtige valg kan tvinges fram hvis det ønskes</li>
<li>Lav terskel. Enkel redigering</li>
<li><enable-image picname="treehouse.jpg" picalt="Sam "></enable-image></li>
<li>HTML5 </li>
<li>Produkt: Url i iframe som enkelt kan embeddes. Ingen sjenerende logo</li>
<li>Fint resultat på desktop</li>
<li><strong>Ulempe:</strong> Må laste ned app for smarttelefon. Hopper ut av websiden til egen player</li>
</ul></enable-read-more>
<h3>H5P</h3>
<iframe src="https://h5p.org/h5p/embed/617" width="545" height="337" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
<enable-read-more label="Om H5p"><h4>H5P er det beste programmet.</h4><p>H5P er gratis og redigering i programmet fungerer i
Wordpress eller Drupal. Wordpress med lokal server måtte derfor installeres.
Videoen må være i formatet .mp4 (De fleste browsere) eller .webm (Opera) eller en URL rett fra YouTube.<br>HP5 tilbyr mange typer interaksjoner. Noen av dem er:</p>
<ul>
<li>Linker</li><li>Tekster</li><li>Tabeller</li><li>Bilder</li><li>Quiz</li><li>Drag and drop</li><li>Multiple choice</li>
<p>Interaktiviteten begrenser seg til navigasjon
innen en video, ikke navigasjon mellom videoer. Men vi kan
lage en sammensatt video av flere videoer og navigere mellom dem med hjelp av bokmerker.<br><br>
Produktet av redigeringen i Wordpress er en iframe. Når iframen er plassert på localhosted/online webside kan
endringer i redigeringen først oppdates i Wordpress og deretter tilsvarende oppdateres på websiden.
Resulatet kan sees umiddelbart. Wordpress-siden kan deles slik at flere kan arbeide samtidig.<br>
For å redigere en webside er Github et mulig verktøy, mens Webstorm er å fortrekke.</p>
</ul></enable-read-more>
<h3>Eget eksempel i H5P</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=1" width="800" height="560" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Interaktiv YouTube-video</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=6" width="800" height="552" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<enable-read-more label="Om interaktivitet i YouTube"><p> Dette eksempelet viser at YouTube nå har fått den ønskede
interaktiviteten som ble etterlyst i de første videoene. Videoen hentes som kilde fra YouTube til Wordpress, de
interaktive elementene hentes
fra Wordpress før de presenteres samlet fra Github-serveren.<br> Det blir noen runder via diverse servere før vi ser
det endelige resultatet. Denne YouTube-løsningen kan (foreløpig) ikke brukes i Enable siden den bare fungerer online
og ikke offline.</p></enable-read-more>
<h2><strong>Andre innholdselementer fra H5P</strong></h2>
<h3>Drag and drop</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=2" width="800" height="670" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Drag text</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=3" width="800" height="270" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Multiple choice med video eller bilde</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=4" width="800" height="810" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Multiple choice med tekst</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=5" width="800" height="310" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Timeline</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=7" width="800" height="600" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Single choice</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=10" width="800" height="250" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Quiz (question set)</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=11" width="800" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Course presentation</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=12" width="800" height="564" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<h3>Gjett svaret</h3>
<iframe src="http://imediamac19.uio.no/wordpress/wp-admin/admin-ajax.php?action=h5p_embed&id=13" width="800" height="526" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://imediamac19.uio.no/wordpress/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>
<iframe src="http://www.intermedia.uio.no/www-data-public/jeretest/tale.html" width="600" height="400" />
</div>
</div>
</body>
</html>