V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
Dive into HTML5 http://diveintohtml5.org/
This topic created in 3215 days ago, the information mentioned may be changed or developed.
Apple.com 美区的 iPad Pro 页面 https://www.apple.com/ipad-pro/ 上的 Watch the film > 视频，是 H5 视频，但有自己的控件外观，并可以加载字幕，甚至可以加载不同音轨（全屏后 Touch Bar 会多出一个按钮，点开可以选择默认音乐音频，或者带英文旁白解说的音频，并可以选择字幕语言）。
这是如何做到的？如何制作与之一致的外观及功能？
PS：通过 Safari 网页检查器可以看到一些文件，例如：
1、JSON 文件 https://www.apple.com/global/ac_media_player/scripts/ac_media_languages/en-US.json
 | 1 islujw OP  1 目前的研究结果： 1、字幕问题： 在 video 标签内添加 track 标签，内容是：src="字幕文件.vtt" kind="captions" srclang="en" label="English" 然后再结束 video 标签。 2、音频轨道问题： 将 mp4 下载后，用 QuickTime Player 播放，仍可选择。这是视频文件本身的内容，不是 HTML 加载的。是否能用 FCP 制作，尚在研究中。 |
 | 2 zpf124 Jul 11, 2017 chrome 测试 没有你说的后续内容， 只有 html5 的标准控件， 音量、进度条、字幕、全屏。 目测 因为你用的 Safari 所以全屏之后调用的是系统自带播放器，然后播放器去读视频内部的多种媒体信息实现对应的功能。 其他浏览器因为全屏不会调用系统自动播放器，所以只实现了 html5 的标准控件。 |
 | 3 DlYgod Jul 11, 2017 |
| 5 islujw OP 尝试使用页面的 HTML 和 CSS 把控制条搞出来了。但音量控制和播放进度条控制，以及时间，还是需要 JS 的。另外，全屏按钮需要在非全凭下全屏，全屏下退出全屏，这个搞了好久没搞懂。 |
Select Language