reinoud/BandersnatchInteractive
1
0
Fork 0
mirror of https://github.com/mehotkhan/BandersnatchInteractive.git synced 2025-07-27 17:23:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve HTML

Browse source 
- Improve English

- Credit all authors

- Mention more controls

- Slightly improve layout

- Remove Google Analytics
This commit is contained in:
Vladimir Panteleev 2019-07-29 01:45:17 +00:00
parent 0bccf68de1
commit 8693936308
2 changed files with 27 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/styles.css
View file

@ -262,7 +262,7 @@ ul.controls-tips {
padding: 16px;
width: inherit;
margin: 0;
margin: 29px auto;
margin: 15px auto;
text-align: left;
}
@ -271,8 +271,8 @@ h2 {
font-size: 1em;
}
ul.file-tips li,
ul.controls-tips li {
ul.file-tips > li,
ul.controls-tips > li {
font-size: .45em;
}

63
index.html
View file

@ -34,22 +34,12 @@
<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," />
content="Stand-alone open-source interactive HTML player for Black Mirror - Bandersnatch" />
<meta name="keywords" content="Bandersnatch,Bandersnatch Interactive Player,Interactive Player,watch," />
<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>
@ -60,12 +50,10 @@
<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>
Authors:
<a href="https://github.com/joric/bandersnatch/">Original version</a> - <a href="https://github.com/joric/">joric</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>
</p>
</div>
<input id="fileinput" type="file">
@ -74,31 +62,30 @@
<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>
<li>This player is known to work only on Google Chrome or Chromium.</li>
<li>Obtain the Bandersnatch video file (duration should be 5:12:14).<br>
Tested with <code>Black.Mirror.Bandersnatch.2018.720p.WEB-DL.x264.DUAL.mkv</code>.</li>
<li>Drag it on top of this box (or click here to select it).</li>
<li>Subtitles in many languages are available.</li>
<li>To change the subtitle:
<ol>
<li>Right click on the video</li>
<li>Enable "Show controls"</li>
<li>Click on the <span class="menu-item"></span> in the bottom-right</li>
<li>Select the desired subtitle</li>
<li>You can now hide the player controls in the same way as step 1-2.</li>
</ol></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 class="controls-tips">
<h6>controls tips</h6>
<h6>Keyboard controls</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>→</kbd> / <kbd>←</kbd> - Jump to the next / 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>
</ul>
</div>
</div>
@ -127,8 +114,6 @@
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>