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、字幕问题: 在 video 标签内添加 track 标签,内容是:src="字幕文件.vtt" kind="captions" srclang="en" label="English" 然后再结束 video 标签。 2、音频轨道问题: 将 mp4 下载后,用 QuickTime Player 播放,仍可选择。这是视频文件本身的内容,不是 HTML 加载的。是否能用 FCP 制作,尚在研究中。 |
2
zpf124 2017-07-11 10:33:27 +08:00
chrome 测试 没有你说的后续内容, 只有 html5 的标准控件, 音量、进度条、字幕、全屏。
目测 因为你用的 Safari 所以全屏之后调用的是系统自带播放器,然后播放器去读视频内部的多种媒体信息实现对应的功能。 其他浏览器因为全屏不会调用系统自动播放器,所以只实现了 html5 的标准控件。 |
3
DlYgod 2017-07-11 10:43:17 +08:00
|
4
islujw OP @zpf124 是的。但是 Safari 下如果修改 HTML 调出 H5 的 controller,也是可以看到按钮,选择音频和字幕语言的。
|
5
islujw OP 尝试使用页面的 HTML 和 CSS 把控制条搞出来了。但音量控制和播放进度条控制,以及时间,还是需要 JS 的。另外,全屏按钮需要在非全凭下全屏,全屏下退出全屏,这个搞了好久没搞懂。
|