Skip to content
This repository was archived by the owner on Nov 22, 2022. It is now read-only.

Commit 0c2e49a

Browse files
FelixHenningerFelixHenninger
committed
Add YouTube video embedding example
1 parent 5a04ae8 commit 0c2e49a

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎templates/Stimuli/video-embedding-youtube.study.json

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
{
2+
"components": {
3+
"2": {
4+
"id": "2",
5+
"type": "lab.html.Screen",
6+
"_tab": "Parameters",
7+
"_template": true,
8+
"files": {
9+
"rows": []
10+
},
11+
"parameters": {
12+
"rows": [
13+
[
14+
{
15+
"name": "videoId",
16+
"value": "dJRsWJqDjFE",
17+
"type": "string"
18+
}
19+
],
20+
[
21+
{
22+
"name": "start",
23+
"value": "73",
24+
"type": "number"
25+
}
26+
],
27+
[
28+
{
29+
"name": "end",
30+
"value": "291",
31+
"type": "number"
32+
}
33+
],
34+
[
35+
{
36+
"name": "message",
37+
"value": "The experiment will continue when the video is over.",
38+
"type": "string"
39+
}
40+
],
41+
[
42+
{
43+
"name": "fade",
44+
"value": "true",
45+
"type": "boolean"
46+
}
47+
]
48+
]
49+
},
50+
"responses": {
51+
"rows": [
52+
[
53+
"",
54+
"",
55+
"",
56+
""
57+
]
58+
]
59+
},
60+
"messageHandlers": {
61+
"rows": [
62+
[
63+
{
64+
"title": "",
65+
"message": "run",
66+
"code": "// Select iframe\nconst iframe = document.querySelector('iframe')\n\n// Setup styles ----------------------------------------------------------------\nconst oldStyle = {\n backgroundColor: document.body.style.backgroundColor,\n transition: document.body.style.transition\n}\n\nlet footer\nif (this.parameters.fade) {\n document.body.style.transition = 'background-color 2s'\n document.body.style.backgroundColor = 'black'\n\n footer = document.querySelector('footer')\n footer.style.transition = 'background-color 2s, border-top-color 1s'\n window.setTimeout(() => {\n footer.style.borderTopColor = 'rgb(248, 248, 248, 0.2)'\n footer.style.color = 'rgba(255, 255, 255, 0.3)'\n footer.style.backgroundColor = 'black'\n }, 100)\n}\n\n// Setup YouTube iFrame interaction --------------------------------------------\n\nconst sendCommand = (data) => {\n iframe.contentWindow.postMessage(JSON.stringify(data), '*')\n}\n\niframe.addEventListener('load', () => {\n // Setup JS messaging API\n sendCommand({ event:'listening', channel: 'widget' })\n\n // Play video\n sendCommand({ event:'command', func:'playVideo' })\n}, { once: true })\n\n// Listen to any incoming status updates\nconst screen = this\nwindow.addEventListener('message', function _yt_event_listener(e) {\n if (e.origin === 'https://www.youtube-nocookie.com') {\n const data = JSON.parse(e.data)\n console.log('got data', data)\n\n // Video is over\n if (\n data.event === 'infoDelivery' &&\n data.info.playerState === 0 &&\n (screen.parameters.end\n ? data.info.currentTime >= screen.parameters.end\n : data.info.currentTime === data.info.duration)\n ) {\n // Remove event listener\n window.removeEventListener('message', _yt_event_listener)\n\n // Reset styles\n if (screen.parameters.fade) {\n document.body.style.backgroundColor = oldStyle.backgroundColor\n footer.style.backgroundColor = ''\n window.setTimeout(\n () => document.body.style.transition = oldStyle.transition,\n 2200\n )\n }\n \n // End screen\n screen.end()\n }\n }\n})"
67+
}
68+
]
69+
]
70+
},
71+
"title": "Embedded YouTube video",
72+
"content": "<main style=\"display: flex; flex-direction: column\">\n <!-- Please see https://developers.google.com/youtube/player_parameters#Parameters for supported options -->\n <iframe\n style=\"flex: 1\"\n src=\"https://www.youtube-nocookie.com/embed/${ this.parameters.videoId }?start=${ this.parameters.start || 0 }&end=${ this.parameters.end || -1 }&autoplay=1&enablejsapi=1&showinfo=0&controls=0&disablekb=1&rel=0&modestbranding=1&iv_load_policy=3\"\n frameborder=\"0\" \n allow=\"autoplay; encrypted-media\"\n allowfullscreen\n ></iframe>\n</main>\n<footer>\n ${ this.parameters.message }\n</footer>\n\n",
73+
"notes": "This template embeds a YouTube video. Please note that it is, in general, vastly preferable to embed a video file directly in the study, as this will provide a higher degree of control over the presentation and lets us better keep track of what participants do. Please also make sure to check the embedding extensively: We try to keep the integration up-to-date, but YouTube may change the way they present videos without notice.\n\nTo enable autoplay, participants must have interacted with the study on previous components.\n\nSettings:\n* VideoId: YouTube video id, as in the last part of https://www.youtube.com/watch?v=xxx\n* Start and end: points at which to start and end the video, in seconds\n* Message: Text to show in the window footer while the video is playing\n* Fade: Fade the background to black while the video is playing (true/false)"
74+
},
75+
"root": {
76+
"id": "root",
77+
"title": "root",
78+
"type": "lab.flow.Sequence",
79+
"children": [
80+
"2"
81+
],
82+
"parameters": {
83+
"rows": [
84+
[
85+
{
86+
"name": "",
87+
"value": "",
88+
"type": "string"
89+
}
90+
]
91+
]
92+
},
93+
"plugins": [
94+
{
95+
"type": "lab.plugins.Metadata"
96+
}
97+
],
98+
"metadata": {
99+
"title": "Youtube video embedding",
100+
"description": "",
101+
"repository": "https://github.com/felixhenninger/lab.js",
102+
"contributors": "Felix Henninger <[email protected]> (https://felixhenninger.com)"
103+
}
104+
}
105+
},
106+
"version": [
107+
19,
108+
1,
109+
1
110+
],
111+
"files": {
112+
"files": {
113+
"index.html": {
114+
"content": "data:text/html,%3C!doctype%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%3Ctitle%3EExperiment%3C%2Ftitle%3E%0A%20%20%3C!--%20viewport%20setup%20--%3E%0A%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%20%20%3C!--%20lab.js%20library%20and%20experiment%20code%20--%3E%0A%20%20%24%7B%20header%20%7D%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3C!--%20If%20you'd%20rather%20have%20a%20container%20with%20a%20fixed%20width%0A%20%20%20%20%20%20%20and%20variable%20height%2C%20try%20removing%20the%20fullscreen%20class%20below%20--%3E%0A%20%20%3Cdiv%20class%3D%22container%20fullscreen%22%20data-labjs-section%3D%22main%22%3E%0A%20%20%20%20%3Cmain%20class%3D%22content-vertical-center%20content-horizontal-center%22%3E%0A%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch2%3ELoading%20Experiment%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EThe%20experiment%20is%20loading%20and%20should%20start%20in%20a%20few%20seconds%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fmain%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A",
115+
"source": "library"
116+
},
117+
"style.css": {
118+
"content": "data:text/css,%2F*%20Please%20define%20your%20custom%20styles%20here%20*%2F",
119+
"source": "library"
120+
}
121+
},
122+
"bundledFiles": {
123+
"lib/lab.js": {
124+
"type": "application/javascript"
125+
},
126+
"lib/lab.js.map": {
127+
"type": "text/plain"
128+
},
129+
"lib/lab.fallback.js": {
130+
"type": "application/javascript"
131+
},
132+
"lib/lab.legacy.js": {
133+
"type": "application/javascript"
134+
},
135+
"lib/lab.legacy.js.map": {
136+
"type": "text/plain"
137+
},
138+
"lib/lab.css": {
139+
"type": "text/css"
140+
},
141+
"lib/loading.svg": {
142+
"type": "image/svg+xml"
143+
}
144+
}
145+
}
146+
}

0 commit comments

Comments
 (0)