mirror of
https://github.com/mehotkhan/BandersnatchInteractive.git
synced 2025-07-27 17:23:22 +00:00
Improve HTML
- Improve English - Credit all authors - Mention more controls - Slightly improve layout - Remove Google Analytics
This commit is contained in:
Vladimir Panteleev
parent
0bccf68de1
commit
8693936308
2 changed files with 27 additions and 42 deletions
|
|
@ -262,7 +262,7 @@ ul.controls-tips {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin: 29px auto;
|
margin: 15px auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -271,8 +271,8 @@ h2 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.file-tips li,
|
ul.file-tips > li,
|
||||||
ul.controls-tips li {
|
ul.controls-tips > li {
|
||||||
font-size: .45em;
|
font-size: .45em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
63
index.html
63
index.html
|
|
@ -34,22 +34,12 @@
|
||||||
|
|
||||||
<title>Bandersnatch Interactive Player</title>
|
<title>Bandersnatch Interactive Player</title>
|
||||||
<meta name="description"
|
<meta name="description"
|
||||||
content="With this online(html) video player you can watch Bandersnatch episode of Black Mirror interactively." />
|
content="Stand-alone open-source interactive HTML player for Black Mirror - Bandersnatch" />
|
||||||
<meta name="keywords" content="Bandersnatch,Bandersnatch Interactive Player,Interactive Player,whatch," />
|
<meta name="keywords" content="Bandersnatch,Bandersnatch Interactive Player,Interactive Player,watch," />
|
||||||
<script src="assets/bandersnatch.js"></script>
|
<script src="assets/bandersnatch.js"></script>
|
||||||
<script src="assets/SegmentMap.js"></script>
|
<script src="assets/SegmentMap.js"></script>
|
||||||
<script src="assets/scripts.js"></script>
|
<script src="assets/scripts.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="assets/styles.css">
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -60,12 +50,10 @@
|
||||||
<div class="file-area">
|
<div class="file-area">
|
||||||
<div class="contact">
|
<div class="contact">
|
||||||
<p>
|
<p>
|
||||||
Developed by <a href="https://github.com/mehotkhan" target="_blank">Mehotkhan</a> ,for
|
Authors:
|
||||||
info <a href="https://github.com/mehotkhan/BandersnatchInteractive"
|
<a href="https://github.com/joric/bandersnatch/">Original version</a> - <a href="https://github.com/joric/">joric</a> |
|
||||||
target="_blank">https://github.com/mehotkhan/BandersnatchInteractive</a>
|
Web page, subtitles - <a href="https://github.com/mehotkhan">Mehotkhan</a> (<a href="bitcoin:1CxaCJbh4VMNicnpktsBVfnVU5xq4QYyHW">donate</a>) |
|
||||||
|
Many fixes, improvements, and everything else - <a href="https://github.com/CyberShadow">CyberShadow</a>
|
||||||
,<b>if you want some donation : my bitcoin wallet :</b>
|
|
||||||
<pr>1CxaCJbh4VMNicnpktsBVfnVU5xq4QYyHW</pr>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<input id="fileinput" type="file">
|
<input id="fileinput" type="file">
|
||||||
|
|
@ -74,31 +62,30 @@
|
||||||
<span class="default">Select Bandersnatch video file ( 5:12:14 ) </span>
|
<span class="default">Select Bandersnatch video file ( 5:12:14 ) </span>
|
||||||
<span class="success">Great, your file is selected</span>
|
<span class="success">Great, your file is selected</span>
|
||||||
<ul class="file-tips">
|
<ul class="file-tips">
|
||||||
<li>this player only work on google chrome ( on firefox dont work , codec problem,test
|
<li>This player is known to work only on Google Chrome or Chromium.</li>
|
||||||
other browser ?)</li>
|
<li>Obtain the Bandersnatch video file (duration should be 5:12:14).<br>
|
||||||
<li>download Bandersnatch video file ( 5:12:14 )</li>
|
Tested with <code>Black.Mirror.Bandersnatch.2018.720p.WEB-DL.x264.DUAL.mkv</code>.</li>
|
||||||
<li>drag it on white box on page :)</li>
|
<li>Drag it on top of this box (or click here to select it).</li>
|
||||||
<li>Persian , English , Arabic , Spanish , Hebrew ,Portuguese ,Greek ,Turkish ,Polish ,Indonesian
|
<li>Subtitles in many languages are available.</li>
|
||||||
subtitle available , if you want add another language
|
<li>To change the subtitle:
|
||||||
subtitle , tell me</li>
|
<ol>
|
||||||
<li>to change subtitle : right click on video , enable show controls , after that . on
|
<li>Right click on the video</li>
|
||||||
bottom,right you see
|
<li>Enable "Show controls"</li>
|
||||||
<span class="menu-item"></span> ,then you can subtitle section </li>
|
<li>Click on the <span class="menu-item"></span> in the bottom-right</li>
|
||||||
<li>Note : after change subtitle , disable show controls ,if dont disable it on full
|
<li>Select the desired subtitle</li>
|
||||||
screen video,you cant see
|
<li>You can now hide the player controls in the same way as step 1-2.</li>
|
||||||
option selector</li>
|
</ol></li>
|
||||||
<li>tested with Black.Mirror.Bandersnatch.2018.720p.WEB-DL.x264.DUAL.mkv file</li>
|
<li>Note: do not use the "full screen" button in the video player if you enable "Show controls".
|
||||||
|
Choice selection interface will not be visible if you do this.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="controls-tips">
|
<ul class="controls-tips">
|
||||||
<h6>controls tips</h6>
|
<h6>Keyboard controls</h6>
|
||||||
<li><kbd>F</kbd> - Toggle fullscreen</li>
|
<li><kbd>F</kbd> - Toggle fullscreen</li>
|
||||||
<li><kbd>R</kbd> - Restart video</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> / <kbd>←</kbd> - Jump to the next / previous segment (or interaction zone)</li>
|
||||||
<li><kbd>←</kbd> - Jump to the previous segment (or interaction zone)</li>
|
<li><kbd>↑</kbd> / <kbd>↓</kbd> - Speed up / slow down playback</li>
|
||||||
<li><kbd>Space</kbd> - Toggle play and pause</li>
|
<li><kbd>Space</kbd> - Toggle play and pause</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -127,8 +114,6 @@
|
||||||
src="subtitle/Czarne.lustro_.Bandersnatch.WEBRip.Netflix.pl.vtt">
|
src="subtitle/Czarne.lustro_.Bandersnatch.WEBRip.Netflix.pl.vtt">
|
||||||
<track label="Indonesian" kind="subtitles" srclang="en"
|
<track label="Indonesian" kind="subtitles" srclang="en"
|
||||||
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP-Indonesian-vtt-sharp.vtt">
|
src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP-Indonesian-vtt-sharp.vtt">
|
||||||
|
|
||||||
|
|
||||||
</video>
|
</video>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div id="choiceCaption"></div>
|
<div id="choiceCaption"></div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue