· psammead-media-player(英语:psammead-media-player) · 游戏机(英语:psammead-media-player) · 游戏机(英语:psammead-media-player) · 游戏机(英语: 
说明
这个 psammead-media-player 组件导出我们媒体播放器的两个版本:AMP版本和Canonical版本.
归根结底,这个组件返回 iframe 用于设定媒体资产.
AMP的变体将形成 amp-iframe 有个巢穴 amp-img 作为占位符使用.
Canonical 变体将生成一个占位符,当点击时将加载 iframe 进入视野.
何时使用此组件
此组件将在页面的任意点使用, 特别是当需要媒体播放器时 .
安装
npm install @bbc/psammead-media-player
道具
Canonical 媒体显示器
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
src | 字符串 | 对 | - 说吧 | 'http://foobar.com/embeddable_endpoint' |
skin | 字符串 | 没有 | 'classic' | 'audio' |
title | 字符串 | 对 | - 说吧 | 'Video player' |
service | 字符串 | 对 | - 说吧 | 'news' |
showPlaceholder | 布尔 | 没有 | true | false |
placeholderSrc | 字符串 | 没有 | null | 'http://foobar.com/placeholder.png' |
placeholderSrcset | 字符串 | 没有 | '' | 'https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w' |
portrait | 布尔 | 没有 | false | true |
mediaInfo | 对象 | 对 | - 说吧 | { title: 'A vertical video pretending to be a cat title', duration: '2:30', durationSpoken: '2 minutes 11 seconds', datetime: 'PT2M30S' } |
noJsClassName | 字符串 | 没有 | null | 'no-js' |
noJsMessage | 字符串 | 对 | - 说吧 | 'This media cannot play in your browser. Please enable Javascript or use a different browser.' |
onMediaInitialised | 函数 | 没有 | () => {} | () => hideLoadingIndicator() |
onMediaPlaying | 函数 | 没有 | () => {} | () => trackMediaPlaybackStarted() |
onMediaPause | 函数 | 没有 | () => {} | () => shrinkPlayerWindow() |
onMediaEnded | 函数 | 没有 | () => {} | () => trackMediaPlaybackComplete() |
onMediaPlaylistEnded | 函数 | 没有 | () => {} | () => visitNextVideoPage() |
onMediaError | 函数 | 没有 | () => {} | () => logError() |
这个 src 需要道克,因为它告诉组件它需要嵌入什么页.
这个 placeholderSrcset 道克不需要,因为它可以根据屏幕大小允许图像响应和优化.
这个 title 嵌入式iframe的可访问性需要道具.
这个 portrait 不需要道具,默认为 false。这是在未来支持肖像视频内容.
这个 showPlaceholder 布尔道具也不需要,默认为 true。 。 。 .
假设 showPlaceholder 实值 true,则 placeholderSrc 将显示什么图像作为占位符.
这个 noJsClassName 是默认为 null 并用于在浏览器中被禁用javascript时添加某些元素的样式支持.
这个 noJsMessage 当 javascript 在浏览器中被禁用时, 是需要使用的道具 .
这个 mediaInfo 需要道具,并具有以下属性.
介质信息
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
title | 字符串 | 对 | - 说吧 | 'A vertical video pretending to be a cat title' |
datetime | 字符串 | 没有 | - 说吧 | 'PT11S' |
duration | 字符串 | 没有 | - 说吧 | '0:11' |
durationSpoken | 字符串 | 没有 | - 说吧 | '11 seconds' |
type | 字符串 | 没有 | "video" | 'audio' |
guidanceMessage | 字符串 | 没有 | - 说吧 | 'May contain strong language,sexual or violent content that may offend' |
活动
Canonical 媒体播放器接受回调功能,它将针对从 iframe 发布的事件引用这些功能. 目前支持以下活动:
| 活动 | 说明 |
|---|---|
onMediaInitialised | 当媒体播放器装入并准备开始播放时调用 |
onMediaPlaying | 当媒体播放器开始播放时调用 |
onMediaPause | 当用户暂停播放时调用 |
onMediaEnded | 当播放列表项目(包括广告或IDID)完成回放时调用 |
onMediaPlaylistEnded | 当整个播放列表完成回放时调用 |
onMediaError | 当媒体播放器遇到错误时调用 |
在使用 BBC 的 iFrame 时,这些回调被引用,并附加了大量关于事件性质的更多信息. 内部用户应参考SMP文件的更详细信息
MpMediaPlayer (英语)
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
src | 字符串 | 对 | - 说吧 | http://foobar.com/embeddable_endpoint |
placeholderSrcset | 字符串 | 没有 | null | 'https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w' |
title | 字符串 | 对 | - 说吧 | Video player |
portrait | 布尔 | 没有 | false | true |
placeholderSrc | 字符串 | 对 | - 说吧 | 'http://foobar.com/placeholder.png' |
这个 placeholderSrc aMP需要道具,因为组件装入 amp-iframe 在600px或75%的 从顶端的取景口,我们必须有一个 amp-img 占位符。 欲了解更多这方面的情况,请参见: Amp-iframe 的 AMP 文件。 。 。 .
使用量
Canonical 媒体显示器
import { CanonicalMediaPlayer } from '@bbc/psammead-media-player';
const Container = ({
src,
skin,
title,
service,
portrait,
showPlaceholder,
placeholderSrc,
placeholderSrcset,
mediaInfo,
noJsClassName,
noJsMessage,
}) => (
<CanonicalMediaPlayer
src={src}
skin={skin}
title={title}
service={service}
portrait={portrait}
placeholderSrc={placeholderSrc}
placeholderSrcset={placeholderSrcset}
showPlaceholder={showPlaceholder}
mediaInfo={mediaInfo}
noJsClassName={noJsClassName}
noJsMessage={noJsMessage}
/>
);
MpMediaPlayer (英语)
import { AmpMediaPlayer } from '@bbc/psammead-media-player';
const Container = ({
src,
title,
portrait,
placeholderSrc,
placeholderSrcset,
}) => (
<AmpMediaPlayer
src={src}
title={title}
portrait={portrait}
placeholderSrc={placeholderSrc}
placeholderSrcset={placeholderSrcset}
/>
);
无障碍说明
这个 title 道具对 无障碍。它针对用户,应当被翻译,以与用户的语言相匹配.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .