matteo/youtube-maze
matteo
/
youtube-maze
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Improve presentation text

This commit is contained in:
Mattéo Delabre 2020-11-29 22:57:48 +01:00
parent bf2730f991
commit 1490ea6ad7
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
3 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,15 +1,15 @@
# YouTube Maze
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
This tool automatically generates visual representations of the networks underlying such games.
[See it live →](https://youtube-maze.delab.re)
## How Does it Work?
The [algorithm](lib/explore.mjs) starts at the first video and explores the links recursively using a breadth-first search approach, keeping track of the links as it goes.
The [Graphviz](http://www.graphviz.org/) library is used to automatically lay out the graph so that as few edges cross as possible.
The [exploration algorithm](lib/explore.mjs) automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using [Graphviz](http://www.graphviz.org).
Only the links in the end screens and in the in-video cards are considered for the exploration.
## Running Locally

37
public/index.html
View File

@ -9,29 +9,36 @@
<h1>YouTube Maze</h1>
<p>
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
This tool automatically generates visual representations of the networks underlying such games.
</p>
<p>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
<h2>Generate a graph</h2>
<form action="/mazes" method="POST">
<p>
<input type="text" name="url" placeholder="Enter the URL of a YouTube video to generate the graph…">
<input type="submit" value="Generate">
</p>
</form>
<h2>Some examples</h2>
<ul>
<li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
<li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
</ul>
<h2>Generate a graph</h2>
<form action="/mazes" method="POST">
<p>
<input type="text" name="url" placeholder="Enter the URL of any YouTube video to start from…">
<input type="submit" value="Generate">
</p>
</form>
<h2>More information</h2>
<p>
The exploration algorithm automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using <a href="http://www.graphviz.org">Graphviz</a>.
Only the links in the end screens and in the in-video cards are considered for the exploration.
</p>
<p>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
</body>
</html>

2
public/style.css
View File

@ -62,7 +62,7 @@ body
line-height: var(--base-unit);
color: var(--text-color);
width: 15cm;
width: 16cm;
margin: calc(4 * var(--base-unit)) auto;
background: var(--background-color);