V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
islujw
V2EX  ›  HTML

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

  •  
  •   islujw · 2017-07-11 05:47:08 +08:00 · 3115 次点击
    这是一个创建于 2452 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 条回复    2017-07-11 18:15:26 +08:00
    islujw
        1
    islujw  
    OP
       2017-07-11 08:26:43 +08:00   ❤️ 1
    目前的研究结果:

    1、字幕问题:

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

    2、音频轨道问题:

    将 mp4 下载后,用 QuickTime Player 播放,仍可选择。这是视频文件本身的内容,不是 HTML 加载的。是否能用 FCP 制作,尚在研究中。
    zpf124
        2
    zpf124  
       2017-07-11 10:33:27 +08:00
    chrome 测试 没有你说的后续内容, 只有 html5 的标准控件, 音量、进度条、字幕、全屏。

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

    其他浏览器因为全屏不会调用系统自动播放器,所以只实现了 html5 的标准控件。
    DlYgod
        3
    DlYgod  
       2017-07-11 10:43:17 +08:00
    islujw
        4
    islujw  
    OP
       2017-07-11 11:24:55 +08:00
    @zpf124 是的。但是 Safari 下如果修改 HTML 调出 H5 的 controller,也是可以看到按钮,选择音频和字幕语言的。
    islujw
        5
    islujw  
    OP
       2017-07-11 18:15:26 +08:00
    尝试使用页面的 HTML 和 CSS 把控制条搞出来了。但音量控制和播放进度条控制,以及时间,还是需要 JS 的。另外,全屏按钮需要在非全凭下全屏,全屏下退出全屏,这个搞了好久没搞懂。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3237 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:07 · PVG 20:07 · LAX 05:07 · JFK 08:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.