视频

创建视频播放器并附加分析.

• 使用量
• 标记
• 萨斯
• Java 脚本
  • 配置
  • 有播放列表
• 测试
• 移徙
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-video。 。 。 .

标记

<div class="o-video" data-o-component="o-video"></div>

视频可以以"小","中"和"大"等三个不同大小来作样式,这些可以被添加到元素中作为类修饰符,例如.

<div class="o-video o-video--large" data-o-component="o-video"></div>

萨斯

为了输出每个大小和属性 o-video,您需要包括以下内容:

@import "@financial-times/o-video/main";

@include oVideo();

通过使用 $opts 地图。 它接受下列名单:

属性

• 'info'
• 'placeholder'

大小

• 'small'
• 'medium'
• 'large'

@import "@financial-times/o-video";

@include oVideo(
    $opts: (
        "sizes": (
            "small",
            "large",
        ),
    )
); // outputs small and large video styles

Java 脚本

选中备忘 o-video,您需要以下内容:

import Video from "@financial-times/o-video";
const opts = {
    id: 4165329773001,
    optimumwidth: 710,
    placeholder: true,
    classes: ["video"],
    systemcode: "my-biz-ops-code",
};
const video = new Video(document.body, opts);

配置

何处 opts 是带有属性的可选对象

• id [String] 视频的出处(brightcoveId 或者说 uuid(中文(简体) )
• autorender [Boolean] 是否让视频自动渲染 。 如果 -虚假 * 那你需要打电话 init() 准备好时
• optimumwidth [Number] 视频占位符图像的最佳宽度
• optimumvideowidth [Number] 视频本身的最佳宽度,当有多个视频引渡时使用 决定显示哪个( 如果存在, 最小的宽度至少与这个宽度相同)
• placeholder [Boolean] 只显示海报图像, 点击时加载( 播放) 视频
• placeholderHint [String] 播放图标旁显示的可选提示( 默认为空)
• placeholderInfo [Array] 占位符上需要显示的额外信息列表(Available:标题,描述,品牌)
• playsinline [Boolean] 是否播放 视频内置 在 iOS 小屏幕上( 默认为全屏幕)
• classes [Array] 添加到视频(和占位符)元素的类
• showCaptions [Boolean] 是否在视频中添加标题。 默认为 true。 。 。 .
• data [Object] JSON 代表 a 的物体 来自下一条介质- api 的响应。如果使用,组件将不会呼叫API,而是使用此数据.
• systemcode [String] 一个有效的 Bizops 系统代码 使用 o-video。 。 。 . 选项,但缺少属性,它将使用 defaultTargeting 对象代替。 以下是目标对象上的每个属性所影响的:
  • site: 是指包含视频创意(部分广告请求)细列项目的广告单位.
  • sizes: 还添加了指定要返回的视频广告大小的代理请求. 订阅级别,分辨率.

配置选项也可以设定为数据属性,以即时宣告模块:

<div
    data-o-component="o-video o-video--large"
    data-o-video-id="4165329773001"
    data-o-video-optimumwidth="710"
></div>

有播放列表

播放列表可能要排队播放视频,然后逐一播放.

import Video from "@financial-times/o-video";

const queue = ["4165329773001", "4907997821001", "4165329773001"];

const player = new Video(document.body, {
    autorender: false,
    systemcode: "my-biz-ops-code",
});
const playlist = new Video.Playlist({ player, queue });

document.querySelector(".next-btn").onclick = () => playlist.next();
document.querySelector(".prev-btn").onclick = () => playlist.prev();

队列是 array 包含 Blightcove 视频标识字符串.

测试

见 折纸制作工具。 。 。 .

$ obt test

需要 Firefox (v38. 0.0 用多填充和镜像 CI 进行测试)

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .