如何制作和 Apple.com 一致的 H5 视频控件外观（以及字幕和音频轨道功能）？

Dive into HTML5

This topic created in 3255 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

2、字幕文件 https://images.apple.com/media/us/ipad-pro/2017/43c41767_0723_4506_889f_0180acc13482/films/feature/ipad-pro-feature-cc-us-20170605_cc.vtt

字幕

文件

检查器

美区

5 replies • 2017-07-11 18:15:26 +08:00

islujw

Jul 11, 2017

目前的研究结果：

1、字幕问题：

在 video 标签内添加 track 标签，内容是：src="字幕文件.vtt" kind="captions" srclang="en" label="English" 然后再结束 video 标签。

2、音频轨道问题：

将 mp4 下载后，用 QuickTime Player 播放，仍可选择。这是视频文件本身的内容，不是 HTML 加载的。是否能用 FCP 制作，尚在研究中。

zpf124

Jul 11, 2017

chrome 测试没有你说的后续内容，只有 html5 的标准控件，音量、进度条、字幕、全屏。

目测因为你用的 Safari 所以全屏之后调用的是系统自带播放器，然后播放器去读视频内部的多种媒体信息实现对应的功能。

其他浏览器因为全屏不会调用系统自动播放器，所以只实现了 html5 的标准控件。

DlYgod

Jul 11, 2017

字幕： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track

islujw

Jul 11, 2017

@zpf124 是的。但是 Safari 下如果修改 HTML 调出 H5 的 controller，也是可以看到按钮，选择音频和字幕语言的。

islujw

Jul 11, 2017

尝试使用页面的 HTML 和 CSS 把控制条搞出来了。但音量控制和播放进度条控制，以及时间，还是需要 JS 的。另外，全屏按钮需要在非全凭下全屏，全屏下退出全屏，这个搞了好久没搞懂。