mirror of
https://github.com/mehotkhan/BandersnatchInteractive.git
synced 2025-07-27 17:23:22 +00:00
152 lines
No EOL
6.1 KiB
HTML
152 lines
No EOL
6.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!--
|
|
This is free and unencumbered software released into the public domain.
|
|
|
|
Anyone is free to copy, modify, publish, use, compile, sell, or
|
|
distribute this software, either in source code form or as a compiled
|
|
binary, for any purpose, commercial or non-commercial, and by any
|
|
means.
|
|
|
|
In jurisdictions that recognize copyright laws, the author or authors
|
|
of this software dedicate any and all copyright interest in the
|
|
software to the public domain. We make this dedication for the benefit
|
|
of the public at large and to the detriment of our heirs and
|
|
successors. We intend this dedication to be an overt act of
|
|
relinquishment in perpetuity of all present and future rights to this
|
|
software under copyright law.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
|
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
|
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
|
OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
For more information, please refer to <http://unlicense.org>
|
|
-->
|
|
|
|
<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> |