mirror of
https://github.com/mehotkhan/BandersnatchInteractive.git
synced 2025-07-27 17:23:22 +00:00
bc81c00be8
Track how we got to a certain scene through persistent breadcrumbs, then follow them back to go along the path the user took.
124 lines
No EOL
4.8 KiB
HTML
124 lines
No EOL
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Bandersnatch Interactive Player</title>
|
|
<meta name="description"
|
|
content="With this online(html) video player you can watch Bandersnatch episode of Black Mirror interactively." />
|
|
<meta name="keywords" content="Bandersnatch,Bandersnatch Interactive Player,Interactive Player,whatch," />
|
|
<script src="assets/bandersnatch.js"></script>
|
|
<script src="assets/SegmentMap.js"></script>
|
|
<script src="assets/scripts.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="assets/styles.css">
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132739093-1"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() { dataLayer.push(arguments); }
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-132739093-1');
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div id="c">
|
|
<section role="banner">
|
|
<div id="file-selector">
|
|
<div class="file-area">
|
|
<div class="contact">
|
|
<p>
|
|
Developed by <a href="https://github.com/mehotkhan" target="_blank">Mehotkhan</a> ,for
|
|
info <a href="https://github.com/mehotkhan/BandersnatchInteractive"
|
|
target="_blank">https://github.com/mehotkhan/BandersnatchInteractive</a>
|
|
|
|
,<b>if you want some donation : my bitcoin wallet :</b>
|
|
<pr>1CxaCJbh4VMNicnpktsBVfnVU5xq4QYyHW</pr>
|
|
</p>
|
|
</div>
|
|
<input id="fileinput" type="file">
|
|
<div class="file-dummy">
|
|
<h2>Bandersnatch Interactive Player</h2>
|
|
<span class="default">Select Bandersnatch video file ( 5:12:14 ) </span>
|
|
<span class="success">Great, your file is selected</span>
|
|
<ul class="file-tips">
|
|
<li>this player only work on google chrome ( on firefox dont work , codec problem,test
|
|
other browser ?)</li>
|
|
<li>download Bandersnatch video file ( 5:12:14 )</li>
|
|
<li>drag it on white box on page :)</li>
|
|
<li>Persian , English , Arabic , Spanish , Hebrew ,Portuguese ,Greek ,Turkish ,Polish ,Indonesian
|
|
subtitle available , if you want add another language
|
|
subtitle , tell me</li>
|
|
<li>to change subtitle : right click on video , enable show controls , after that . on
|
|
bottom,right you see
|
|
<span class="menu-item"></span> ,then you can subtitle section </li>
|
|
<li>Note : after change subtitle , disable show controls ,if dont disable it on full
|
|
screen video,you cant see
|
|
option selector</li>
|
|
<li>tested with Black.Mirror.Bandersnatch.2018.720p.WEB-DL.x264.DUAL.mkv file</li>
|
|
|
|
</ul>
|
|
|
|
<ul class="controls-tips">
|
|
<h6>controls tips</h6>
|
|
<li><kbd>F</kbd> - Toggle fullscreen</li>
|
|
<li><kbd>R</kbd> - Restart video</li>
|
|
<li><kbd>→</kbd> - Jump to the next segment (or to the next interaction zone)</li>
|
|
<li><kbd>←</kbd> - Jump to the previous segment (or interaction zone)</li>
|
|
<li><kbd>Space</kbd> - Toggle play and pause</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="wrapper-video">
|
|
<video id="video" preload="metadata">
|
|
<source id="video-source" src="">
|
|
<track label="English" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP.vtt" default>
|
|
<track label="Persian" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP-persian-vtt-sharp.vtt">
|
|
<track label="Arabic" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018-arabic.vtt">
|
|
<track label="Spanish" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.720p.espanish.vtt">
|
|
<track label="Hebrew" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.Web-05.12.14-NF-UniHebSubs-hebrew.vtt">
|
|
<track label="Portuguese" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.720p.portuguese.vtt">
|
|
<track label="Greek" kind="subtitles" srclang="en"
|
|
src="subtitle/black-mirror-bandersnatch-2018-nf-web-dl-720p-greek.vtt">
|
|
<track label="Turkish" kind="subtitles" srclang="en"
|
|
src="subtitle/BlackMirror.Bandersnatch-Turkish.vtt">
|
|
<track label="Polish" kind="subtitles" srclang="en"
|
|
src="subtitle/Czarne.lustro_.Bandersnatch.WEBRip.Netflix.pl.vtt">
|
|
<track label="Indonesian" kind="subtitles" srclang="en"
|
|
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP-Indonesian-vtt-sharp.vtt">
|
|
|
|
|
|
</video>
|
|
<div class="controls">
|
|
<div id="choiceCaption"></div>
|
|
<div id="progress"></div>
|
|
<div class="buttons">
|
|
<ul id="choices"></ul>
|
|
<ul id="interactionZones"></ul>
|
|
<ul id="nextSegments"></ul>
|
|
<ul id="nextSegment"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |