黑镜:潘达斯奈基 互动播放器 (基于浏览器)
通过本html播放器,可实现电影《黑镜:潘达斯奈基》
的交互式体验。
目录
只需将 时长5:12:40 的《黑镜:潘达斯奈基》
视频文件拖放到该演示页面即可开始播放。
- 关闭所有浏览器窗口
- 运行
自动播放.bat
- 选择对应的浏览器即可
- F / F11 / 鼠标双击 - 开关全屏模式
- R - 从头播放视频
- → / ← - 跳到下一个/上一个 剧情支线(或互动选择界面)
- ↑ / ↓ - 加速播放/减速播放
- 空格 / 鼠标单击 - 切换播放/暂停
- F5 - 刷新页面,回到初始化位置
- Crtl+鼠标滚轮 - 调节字体大小
- Ctrl +0 - 恢复默认字体大小
注:
- 以上操作在Chrome,Egde,Firefox浏览器内测试通过,其他浏览器可能会有一定的偏差。
- 选择剧情时,如果未在限定时间内进行选择,则会按照默认剧情播放。默认选项会被
[]
标记,如[VISIT DR HAYNES|拜访海恩斯大夫]
。 - 播放器的控制面板可以通过【显示所有控件】打开,可以选择字幕、播放速度等。
- 请勿在全屏播放时持续启用【显示所有控件】功能,使用完成后立即关闭!!! 否则可能遇到播放问题。
- 遇到播放故障时,可以重新退出并进入全屏或者鼠标双击屏幕试试。
- 预览
- 全屏
- 非全屏
请自行下载时长为5:12:40的《黑镜:潘达斯奈基》视频文件。
本播放器经Black.Mirror.Bandersnatch.2018.1080p.NF.WEB-DL.x264.AAC-PTerWEB.mp4
在Chrome 99.0.4844.51
,微软Edge浏览器 99.0.1150.30
,Firefox 97.0.2
,Opera_74.0.3911.75
,搜狗浏览器11.0.1.34700
等浏览器测试通过。
Google Chrome,Microsoft Edge【强烈推荐】,Opera,搜狗浏览器等Chromium内核的浏览器支持mp4及mkv格式的视频文件;Firefox火狐浏览器不支持mkv格式,可支持mp4格式。
浏览器 | 视频编码 | 音频编码 | 容器(后缀) |
---|---|---|---|
Microsoft Edge | x264 + x265 | AAC + AC3 | MP4 + MKV |
Chrome等 | x264 | AAC | MP4 + MKV |
Firefox | x264 | AAC | MP4 |
原则上,任何拥有良好html5支持的现代浏览器均可通过index.html
进行播放,但受浏览器的安全限制,Chrome等浏览器默认不可以通过file协议加载文件,从而导致离线播放时无法加载字幕文件。故而有两种解决方式:
- 通过特定的设置来规避浏览器的file协议安全限制
- 类似于上述在线演示版,将本项目托管为在线http模式,可使用
Quick ‘n Easy Web Server
这类小程序,当然了你也可以使用Nginx或者Apache等大部头。
注:仅在Windows10下进行了测试,Linux及MacOS原则上也可以,请自行搜索相关设置。
Chrome等浏览器可以通过启动时加参数--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
实现对此安全限制的规避,但如果原浏览器窗口未关闭,那么该参数将可能会无效,因此使用该方式启动前请先关闭所有相同浏览器的窗口。通过这种方式打开的浏览器后,便可以载入index.html进行播放。
Chrome:
start chrome --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
Edge:
start msedge --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
Opera:
start opera --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
搜狗浏览器:
"C:\Program Files (x86)\SogouExplorer\SogouExplorer.exe" --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
命令行方式虽然直观,但每次关闭后变会失效,每次打开均需输入长短命令颇为繁琐;如若准备长期绕过浏览器安全限制,则建议修改浏览器快捷方式(图标)的属性设置。将--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
增加到快捷方式属性的【目标】后,如下图所示:
不同于Chrome系的浏览器,Firefox浏览器需要在地址栏输入about:config
来打开高级设置,然后搜索privacy.file_unique_origin
点击添加,再双击选项,将设置从True调整为False,然后刷新网页即可。
打开【高级首选项】
start Firefox -new-tab about:config
搜索privacy.file_unique_origin
点击添加
如果Firefox无法正常播放,请检查浏览器的权限设置
使用Quick ‘n Easy Web Server
搭建本地WEB
在浏览器中输入http://localhost/
或者http://127.0.0.1
打开播放器
- assets 包含控制用的js脚本。其中bandersnatch.js包含剧情选择的时间点(单位为毫秒)及提示语。bandersnatch_en.js为原版英文,bandersnatch.js为本人自行翻译,不足之处还请指正!
- screenshot 包含各截图。
- subtitle 包含各字幕。
- video 用来存放视频文件。
- index.html 核心文件,用来播放视频。
- autoplay.bat & 自动播放.bat 用来快捷启动浏览器
- README.md & README.EN.md 说明文件
- 若想实现特效字幕之类的效果,需要将字幕以硬字幕的方式进行压制。
- 支线剧情选择可能有部分缺失,如拨号界面,无法百分百复刻NF官方效果。
- index.html在1080p环境下调整,其他分辨率下可能会出现一些不可预料的错位等情况。
默认简英双语字幕,支持简英双语,简体中文,繁體中文,English SDH,Arabic,Danish,German,Greek,Spanish(es),Spanish(es-ES),Finnish,French,Hebrew,Indonesian,Icelandic,Italian,Japanese,Korean,Norwegian (Bokmål),Dutch,Polish,Portuguese (Portugal),Portuguese (Brazil),Romanian,Russian,Swedish,Thai,Turkish,Vietnamese等多国字幕。
简英双语字幕由Arayn合并官方字幕手工调整得到,剩下字幕均为NF官方字幕,感谢锐大提供的素材!
为便于操作,字幕菜单里顶部和底部均加了简英双字
,简体中文
,繁体中文
,英文SDH
。但顶部的简体中文
,繁体中文
,英文SDH
会显示在画面内,而底部的简体中文
,繁体中文
,英文SDH
则会显示在黑框内。请根据喜好自行选择。
subtitle内的Forced子文件夹内为各国强制字幕,仅做存档,实际未使用。
欢迎提交更精良的字幕(vtt格式)。
- 播放视频后,在视频内鼠标右键打开菜单.
- 启用【显示所有控件】
- 鼠标单击页面右下角的菜单
- 选择对应的字幕
- 然后按照上边步骤1-2关闭【显示所有控件】
Chrome等显示所有控件
Firefox显示所有控件
页面右下角菜单位置
菜单
字幕菜单
字幕在画面内
字幕在黑边内
- https://github.com/joric/bandersnatch
- https://github.com/mehotkhan/BandersnatchInteractive
- https://engelsjk.com/posts/through-the-looking-glass-at-netflix/
- https://en.wikipedia.org/wiki/HTML5_audio
- https://en.wikipedia.org/wiki/HTML5_video
- https://bugs.chromium.org/p/chromium/issues/detail?id=243861
- https://support.mozilla.org/en-US/kb/html5-audio-and-video-Firefox