Fire TV Web应用开发：基于Brightcove视频云的开发指南

项目概述

本文介绍如何使用Web App Starter Kit for Fire TV开发基于Brightcove视频云服务的电视应用。该项目提供了完整的解决方案，支持从Brightcove Video Cloud获取内容，并使用Brightcove Player进行视频播放。项目还集成了Brightcove视频云分析功能和IMA3广告插件支持。

快速开始

项目结构

Brightcove示例项目位于src/projects/brightcove目录中。要快速在Fire TV上运行此项目，需要创建一个ZIP包：

1. 从out/brightcove/目录获取示例应用
2. 确保index.html文件位于ZIP包的根目录
3. 正确的目录结构示例：

   - index.html
   - assets/
   - firetv.css
   - js/
   

在Fire TV上测试

1. 在Fire TV设备上安装Web App Tester应用
2. 确保Fire TV和开发电脑在同一网络
3. 启动Web App Tester
4. 选择"Test Packaged App"选项
5. 通过以下方式之一加载应用：
   • 输入指向ZIP文件的URL
   • 将ZIP文件推送到设备的/sdcard/amazonwebapps目录
6. 选择"Sync"同步应用包
7. 选择"Verify"验证包有效性
8. 验证通过后选择"Test"测试应用

在浏览器中测试

在浏览器中测试时，需要启用CORS请求。对于Chrome浏览器，可以使用相关插件实现。注意：播放广告时可能会看到"Video Playback Error"对话框，可以使用广告拦截插件临时解决此问题。

项目定制化

要将示例项目定制为使用自己的Brightcove Video Cloud账户内容，需要进行以下设置：

1. 创建播放列表：在Brightcove后台创建手动或智能播放列表，并将播放列表的Reference ID设置为以"FireTV"为前缀
2. 获取Media API读取令牌：获取普通读取令牌，不建议使用具有URL访问权限的令牌
3. 创建Brightcove播放器：在Video Cloud Studio中创建并配置播放器，确保启用"Auto-Start Video on Player Load"选项
4. 获取账户ID：从账户详情页面获取

获取以上信息后，修改init.js文件中的配置对象：

var settings = {
    Model: BrightcoveAPIModel,
    PlayerView: BrightcovePlayerView,
    PlaylistView: PlaylistPlayerView,
    dataURL: "https://api.brightcove.com/services/library",
    numberOfCategories: 30,
    developerToken: "<DEVELOPER_TOKEN>",
    accountID: "<ACCOUNT_ID>",
    playerID: "<PLAYER_ID>",
    showSearch: true,
    displayButtons: false
};

功能支持

1. 内容获取：从Video Cloud获取媒体内容，显示Reference ID以"FireTV"为前缀的播放列表作为左侧导航类别
2. 播放器控制：使用Brightcove Player播放内容，自定义控制以适应Fire TV遥控器
3. 分析支持：集成Brightcove Video Cloud Analytics
4. 广告支持：通过IMA3插件支持广告播放
5. 搜索功能：支持搜索账户中的所有视频，搜索范围包括displayName、shortDescription和longDescription字段

注意：不支持子类别结构

架构详解

内容模型

Brightcove中的视频组织在"播放列表"中，播放列表可以是手动或智能类型。项目模型仅显示Reference ID字段带有"FireTV"前缀的播放列表，并将播放列表直接映射为类别显示在左侧导航视图中。

数据接口

项目使用三种主要数据接口：

1. 播放列表接口：获取所有播放列表信息，用于填充导航视图
2. 视频接口：获取特定播放列表中的所有视频信息
3. 搜索接口：搜索视频内容

播放器实现

项目使用新版Brightcove Player，处理视频/广告播放、搜索功能和播放/暂停操作。播放器还处理IMA3特定的广告事件：

• 'adstart'：广告开始，禁用遥控器操作
• 'adend'：广告结束，启用遥控器操作
• 错误事件：处理广告播放错误

高级定制选项

主题定制

通过修改brightcove项目目录中的firetv.scss文件，可以添加自定义变量和样式。

模型定制

BrightcoveAPIModel模块负责处理数据请求和管理应用数据，位于src/common/js目录中。

播放器视图

BrightcovePlayerView模块处理Brightcove视频播放功能，位于src/common/js目录。PlaylistPlayerView模块处理连续播放功能，位于src/projects/brightcove目录。

已知问题

1. HLS视频播放时，首次按下暂停按钮可能不会显示控制覆盖层（Fire TV平台限制）
2. Brightcove Video Cloud账户的更改可能需要最多30分钟才能在应用中反映

测试与提交

建议在提交到应用商店前进行充分测试。注意：由于CORS限制，需要以打包应用形式提交到Amazon应用商店。

开发支持

对于Brightcove账户和应用设置/开发问题，请联系Brightcove技术支持或账户经理。对于Brightcove示例项目本身的问题，可以通过项目问题跟踪系统报告。