45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>YouTube Maze</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<h1>YouTube Maze</h1>
|
|
|
|
<p>
|
|
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 visual representations of the networks underlying such games.
|
|
</p>
|
|
|
|
<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>
|