@ brightcove/ react-player-loader (英语)

在浏览器中装入 Blightcove Player 的回放组件 .

Blightcove 玩家支持

这个图书馆 与 Blightcove 玩家加载器相同的支持特性。 。 。 .

目录

• 安装
• JSX的标准使用
• 道具
  • attrs
  • baseUrl
  • manualReloadFromPropChanges
  • 其他提案
• 提案更改的影响
• 查看演示
• 备选用途
  • ES模块(不含JSX)
  • 常见JS
  • <script> 标记

安装

无论您如何使用此组件, 唯一可用的是 npm .

npm install --save @brightcove/react-player-loader

JSX的标准使用

大多数反应应用程序使用JSX和由JSX提供的工具链 create-react-app。 。 。 .

安装后, import 模块并使用 ReactPlayerLoader 与您 React 应用程序中的其他组件相类似的组件 :

注: React编号 :ReactDOM 为: 没有 需要时, 它们仅用于显示完整的工作示例 !

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader from '@brightcove/react-player-loader';

let reactPlayerLoader;
const onSuccess = function(success) {

  // The player object or iframe element (depending on embed type) can be
  // accessed in two ways.
  // 
  // From the success object passed to the `onSuccess` callback:
  console.log(success.ref);

  // As a property of the component instance:
  console.log(reactPlayerLoader.player);
};

reactPlayerLoader = ReactDOM.render(
  <ReactPlayerLoader accountId='1234678' onSuccess={onSuccess}/>,
  document.getElementById('fixture')
);

见 备选用途 以下列出使用这一构成部分的不太常见的方法.

道具

attrs

类型 : Object

为组件元素提供属性(道克).

例如,您可能想要自定义 className (默认情况下, "brightcove-react-player-loader") 通过在这样的组件上设置道具:

<ReactPlayerLoader attrs={{className: 'my-custom-class'}} />

baseUrl

类型 : string

用于为被嵌入的 Blightcove 玩家覆盖基础 URL .

大多数用户永远不会需要这个道具. 默认情况下,玩家会从布莱克科夫的玩家CDN(players.brightcove.net) (中文(简体) ).

manualReloadFromPropChanges

类型 : boolean

用于指定在道具更改后重新装入玩家是否会被手动处理. 这可以通过拨打 refToReactPlayerLoader.loadPlayer()。 。 。 .

见 提案更改的影响 下文列出道具变化的影响.

其他提案

上面没有说明的所有道具都交给 亮湾玩家加载器 有一些不同之处:

1. 我们不能轻易暴露玩家加载者的承诺,所以你必须使用 onSuccess 财务报告和审定财务报表 onFailure 召回电话.
2. 如果你不提供 onFailure callback, 失败将通过抛出错误处理 .
3. 我们需要使用 refNode 财务报告和审定财务报表 refNodeInsert 内部,所以这些道具会被忽略.

提案更改的影响

当一个道具传递到这个组件时,它会产生两种效果之一:

1. 处理/ 重新装入玩家 。 这是最常见的案例.
2. 更新玩家状态(例如获取新视频).

以下道具将更新玩家状态 无 重装:

• catalogSearch
• catalogSequence
• playlistId
• playlistVideoId
• videoId

所有其他道具变化,不包括 function's, 会导致一个完整的处理/ 重载 .

查看演示

该寄存器包括一个赤骨演示/实例页.

1. 清除仓库
2. 移动到仓库中
3. 运行 npm install
4. 运行 npm start
5. 导航到 http://localhost:9999 在浏览器中

备选用途

ES模块(不含JSX)

安装后, import 并使用 ReactPlayerLoader 与您 React 应用程序中的其他组件相类似的组件 :

注: React编号 :ReactDOM 为: 没有 需要时, 它们仅用于显示完整的工作示例 !

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader  from '@brightcove/react-player-loader';

const reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

常见JS

安装后, require 并使用 ReactPlayerLoader 与您 React 应用程序中的其他组件相类似的组件 :

注: React编号 :ReactDOM 为: 没有 需要时, 它们仅用于显示完整的工作示例 !

var React = require('react');
var ReactDOM = require('react-dom');
var ReactPlayerLoader = require('@brightcove/react-player-loader');

var reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess: function(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

<script> 标记

本案极不可能被利用.

安装或从CDN装入后,使用 script 标记以包含模块到您的 HTML 中并使用全局 window.BrightcoveReactPlayerLoader 用于构建组件.

<div id="fixture"></div>
<script src="//path/to/react.min.js"></script>
<script src="//path/to/react-dom.min.js"></script>
<script src="//path/to/brightcove-react-player-loader.min.js"></script>
<script>
  var React = window.React;
  var ReactDOM = window.ReactDOM;

  var reactPlayerLoader = ReactDOM.render(
    React.createElement(window.BrightcoveReactPlayerLoader, {
      accountId: '1234678',
      onSuccess: function(success) {
        // two ways to get the underlying player/iframe at this point.
        console.log(success.ref)
        console.log(reactPlayerLoader.player);
      }
    }),
    document.getElementById('fixture')
  );
</script>