videojs文档翻译-Component

Component

所有UI组件的基类。 组件是UI对象,它们表示DOM对象和DOM中的元素。 他们可以是其他组件的子组件,也可以有自己的子组件。

组件也可以使用EventTarget的方法

Constructor

new Component(player, optionsopt, readyopt)

创建此类的实例。

Parameters:
Name Type Attributes Description
player Player  
这个类应该被附加到的播放器。

options Object <optional>
关于播放器选项的键/值存储。Properties

Name Type Attributes Description
children Array.<Object> <optional>
一个数组的子对象用来初始化这个组件。 如果需要添加多个同一类型的组件,则子对象具有将被使用的名称属性。

ready Component~ReadyCallback <optional>
组件准备就绪时调用的函数。

Methods

static getComponent(name) → {Component}

component.jsline 1503

Get a Component based on the name it was registered with.

Parameters:
Name Type Description
name string
The Name of the component to get.

Returns:

Component -

The Component that got registered under the given name.

Deprecated:
  • In `videojs` 6 this will not return `Component`s that were not registered using Component.registerComponent. Currently we check the global `videojs` object for a `Component` name and return that if it exists.

static registerComponent(name, ComponentToRegister) → {Component}

component.jsline 1437

Register a Component with videojs given the name and the component.

NOTE: Techs should not be registered as a ComponentTechs should be registered using Tech.registerTech or videojs:videojs.registerTech.

NOTE: This function can also be seen on videojs as videojs:videojs.registerComponent.

Parameters:
Name Type Description
name string
The name of the Component to register.

ComponentToRegister Component
The Component class to register.

Returns:

Component -

The Component that was registered.

$(selector, contextopt) → {Element|null}

component.jsline 666

Find a single DOM element matching a selector. This can be within the ComponentcontentEl() or another custom context.

Parameters:
Name Type Attributes Default Description
selector string    
A valid CSS selector, which will be passed to querySelector.

context Element | string <optional> this.contentEl()
A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing this.contentEl() gets used. If this.contentEl() returns nothing it falls back to document.

Returns:

Element | null -

the dom element that was found, or null

See:

$$(selector, contextopt) → {NodeList}

component.jsline 688

Finds all DOM element matching a selector. This can be within the ComponentcontentEl() or another custom context.

Parameters:
Name Type Attributes Default Description
selector string    
A valid CSS selector, which will be passed to querySelectorAll.

context Element | string <optional> this.contentEl()
A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing this.contentEl() gets used. If this.contentEl() returns nothing it falls back to document.

Returns:

NodeList -

a list of dom elements that were found

See:

addChild(child, optionsopt, indexopt) → {Component}

component.jsline 377

Add a child Component inside the current Component.

Parameters:
Name Type Attributes Default Description
child string | Component    
The name or instance of a child to add.

options Object <optional> {}
The key/value store of options that will get passed to children of the child.

index number <optional> this.children_.length
The index to attempt to add a child into.

Returns:

Component -

The Component that gets added as a child. When using a string the Component will get created by this process.

addClass(classToAdd)

component.jsline 712

Add a CSS class name to the Components element.

Parameters:
Name Type Description
classToAdd string
CSS class name to add

blur()

component.jsline 1049

Remove the focus from this component

abstract buildCSSClass() → {string}

component.jsline 586

Builds the default DOM class name. Should be overriden by sub-components.

Returns:

string -

The DOM class name for this object.

cancelAnimationFrame(id) → {number}

component.jsline 1401

Cancels a queued callback passed to Component#requestAnimationFrame (rAF).

If you queue an rAF callback via Component#requestAnimationFrame, use this function instead of window.cancelAnimationFrame. If you don‘t, your dispose listener will not get cleaned up until Component#dispose!

Parameters:
Name Type Description
id number
The rAF ID to clear. The return value of Component#requestAnimationFrame.

Returns:

number -

Returns the rAF ID that was cleared.

See:

children() → {Array}

component.jsline 323

Get an array of all child components

Returns:

Array -

The children

clearInterval(intervalId) → {number}

component.jsline 1331

Clears an interval that gets created via window.setInterval or Component#setInterval. If you set an inteval via Component#setInterval use this function instead ofwindow.clearInterval. If you don‘t your dispose listener will not get cleaned up until Component#dispose!

Parameters:
Name Type Description
intervalId number
The id of the interval to clear. The return value of Component#setInterval or window.setInterval.

Returns:

number -

Returns the interval id that was cleared.

See:

clearTimeout(timeoutId) → {number}

component.jsline 1268

Clears a timeout that gets created via window.setTimeout or Component#setTimeout. If you set a timeout via Component#setTimeout use this function instead ofwindow.clearTimout. If you don‘t your dispose listener will not get cleaned up until Component#dispose!

Parameters:
Name Type Description
timeoutId number
The id of the timeout to clear. The return value of Component#setTimeout or window.setTimeout.

Returns:

number -

Returns the timeout id that was cleared.

See:

contentEl() → {Element}

component.jsline 292

Return the Components DOM element. This is where children get inserted. This will usually be the the same as the element returned in Component#el.

Returns:

Element -

The content element for this Component.

createEl(tagNameopt, propertiesopt, attributesopt) → {Element}

component.jsline 212

Create the Components DOM element.

Parameters:
Name Type Attributes Description
tagName string <optional>
Element‘s DOM node type. e.g. ‘div‘

properties Object <optional>
An object of properties that should be set.

attributes Object <optional>
An object of attributes that should be set.

Returns:

Element -

The element that gets created.

currentDimension(widthOrHeight) → {number}

component.jsline 964

Get the width or the height of the Component elements computed style. Uses window.getComputedStyle.

Parameters:
Name Type Description
widthOrHeight string
A string containing ‘width‘ or ‘height‘. Whichever one you want to get.

Returns:

number -

The dimension that gets asked for or 0 if nothing was set for that dimension.

currentDimensions() → {Component~DimensionObject}

component.jsline 1012

Get an object that contains width and height values of the Components computed style.

Returns:

Component~DimensionObject -

The dimensions of the components element

currentHeight() → {number}

component.jsline 1035

Get the height of the Components computed style. Uses window.getComputedStyle.

Returns:

number -

height The height of the Components computed style.

currentWidth() → {number}

component.jsline 1025

Get the width of the Components computed style. Uses window.getComputedStyle.

Returns:

number -

width The width of the Components computed style.

dimension(widthOrHeight, numopt, skipListenersopt) → {number}

component.jsline 902

Get or set width or height of the Component element. This is the shared code for the Component#width and Component#height.

Things to know:

  • If the width or height in an number this will return the number postfixed with ‘px‘.
  • If the width/height is a percent this will return the percent postfixed with ‘%‘
  • Hidden elements have a width of 0 with window.getComputedStyle. This function defaults to the Componentstyle.width and falls back to window.getComputedStyle. Seethis for more information
  • If you want the computed style of the component, use Component#currentWidth and {Component#currentHeight
Parameters:
Name Type Attributes Description
widthOrHeight string  
8 ‘width‘ or ‘height‘

num number | string <optional>
8 New dimension

skipListeners boolean <optional>
Skip componentresize event trigger

Fires:
Returns:

number -

The dimension when getting or 0 if unset

dimensions(width, height)

component.jsline 868

Set both the width and height of the Component element at the same time.

Parameters:
Name Type Description
width number | string
Width to set the Components element to.

height number | string
Height to set the Components element to.

dispose()

component.jsline 114

Dispose of the Component and all child components.

Fires:

el() → {Element}

component.jsline 193

Get the Components DOM element

Returns:

Element -

The DOM element for this Component.

enableTouchActivity()

component.jsline 1173

This function reports user activity whenever touch events happen. This can get turned off by any sub-components that wants touch events to act another way.

Report user touch activity when touch events occur. User activity gets used to determine when controls should show/hide. It is simple when it comes to mouse events, because any mouse event should show the controls. So we capture mouse events that bubble up to the player and report activity when that happens. With touch events it isn‘t as easy as touchstart andtouchend toggle player controls. So touch events can‘t help us at the player level either.

User activity gets checked asynchronously. So what could happen is a tap event on the video turns the controls off. Then the touchend event bubbles up to the player. Which, if it reported user activity, would turn the controls right back on. We also don‘t want to completely block touch events from bubbling up. Furthermore a touchmove event and anything other than a tap, should not turn controls back on.

Listens to Events:
  • Component#event:touchstart
  • Component#event:touchmove
  • Component#event:touchend
  • Component#event:touchcancel

focus()

component.jsline 1042

Set the focus to this component

getAttribute(attribute) → {string|null}

component.jsline 792

Get the value of an attribute on the Components element.

Parameters:
Name Type Description
attribute string
Name of the attribute to get the value from.

Returns:

string | null -

  • The value of the attribute that was asked for.

      - Can be an empty string on some browsers if the attribute does not exist
        or has no value
      - Most browsers will return null if the attibute does not exist or has
        no value.
See:

getChild(name) → {Component|undefined}

component.jsline 349

Returns the child Component with the given name.

Parameters:
Name Type Description
name string
The name of the child Component to get.

Returns:

Component | undefined -

The child Component with the given name or undefined.

getChildById(id) → {Component|undefined}

component.jsline 336

Returns the child Component with the given id.

Parameters:
Name Type Description
id string
The id of the child Component to get.

Returns:

Component | undefined -

The child Component with the given id or undefined.

hasClass(classToCheck) → {boolean}

component.jsline 702

Check if a component‘s element has a CSS class name.

Parameters:
Name Type Description
classToCheck string
CSS class name to check.

Returns:

boolean -

  • True if the Component has the class.

      - False if the `Component` does not have the class`

height(numopt, skipListenersopt) → {number|string}

component.jsline 855

Get or set the height of the component based upon the CSS styles. See Component#dimension for more detailed information.

Parameters:
Name Type Attributes Description
num number | string <optional>
The height that you want to set postfixed with ‘%‘, ‘px‘ or nothing.

skipListeners boolean <optional>
Skip the componentresize event trigger

Returns:

number | string -

The width when getting, zero if there is no width. Can be a string postpixed with ‘%‘ or ‘px‘.

hide()

component.jsline 753

Hide the Components element if it is currently showing by adding the ‘vjs-hidden` class name to it.

id() → {string}

component.jsline 302

Get this Components ID

Returns:

string -

The id of this Component

initChildren()

component.jsline 483

Add and initialize default child Components based upon options.

localize(string, tokensopt, defaultValueopt) → {string}

component.jsline 254

Localize a string given the string in english.

If tokens are provided, it‘ll try and run a simple token replacement on the provided string. The tokens it loooks for look like {1} with the index being 1-indexed into the tokens array.

If a defaultValue is provided, it‘ll use that over string, if a value isn‘t found in provided language files. This is useful if you want to have a descriptive key for token replacement but have a succinct localized string and not require en.json to be included.

Currently, it is used for the progress bar timing.

{
  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
}

It is then used like so:

this.localize(‘progress bar timing: currentTime={1} duration{2}‘,
              [this.player_.currentTime(), this.player_.duration()],
              ‘{1} of {2}‘);

Which outputs something like: 01:23 of 24:56.

Parameters:
Name Type Attributes Description
string string  
The string to localize and the key to lookup in the language files.

tokens Array.<string> <optional>
If the current item has token replacements, provide the tokens here.

defaultValue string <optional>
Defaults to string. Can be a default value to use for token replacement if the lookup key is needed to be separate.

Returns:

string -

The localized string or if no localization exists the english string.

name() → {string}

component.jsline 313

Get the Components name. The name gets used to reference the Component and is set during registration.

Returns:

string -

The name of this Component.

options(obj) → {Object}

component.jsline 176

Deep merge of options objects with new options.

Note: When both obj and options contain properties whose values are objects. The two properties get merged using module:mergeOptions

Parameters:
Name Type Description
obj Object
The object that contains new options.

Returns:

Object -

A new object of this.options_ and obj merged together.

Deprecated:
  • since version 5

player() → {Player}

component.jsline 159

Return the Player that the Component has attached to.

Returns:

Player -

The player that this Component has attached to.

ready() → {Component}

component.jsline 600

Bind a listener to the component‘s ready state. Different from event listeners in that if the ready event has already happened it will trigger the function immediately.

Returns:

Component -

Returns itself; method can be chained.

removeAttribute(attribute)

component.jsline 819

Remove an attribute from the Components element.

Parameters:
Name Type Description
attribute string
Name of the attribute to remove.

See:

removeChild(component)

component.jsline 447

Remove a child Component from this Components list of children. Also removes the child Components element from this Components element.

Parameters:
Name Type Description
component Component
The child Component to remove.

removeClass(classToRemove)

component.jsline 722

Remove a CSS class name from the Components element.

Parameters:
Name Type Description
classToRemove string
CSS class name to remove

requestAnimationFrame(fn) → {number}

component.jsline 1368

Queues up a callback to be passed to requestAnimationFrame (rAF), but with a few extra bonuses:

  • Supports browsers that do not support rAF by falling back to Component#setTimeout.
  • The callback is turned into a Component~GenericCallback (i.e. bound to the component).
  • Automatic cancellation of the rAF callback is handled if the component is disposed before it is called.
Parameters:
Name Type Description
fn Component~GenericCallback
A function that will be bound to this component and executed just before the browser‘s next repaint.

Listens to Events:
Returns:

number -

Returns an rAF ID that gets used to identify the timeout. It can also be used in Component#cancelAnimationFrame to cancel the animation frame callback.

See:

setAttribute(attribute, value)

component.jsline 807

Set the value of an attribute on the Component‘s element

Parameters:
Name Type Description
attribute string
Name of the attribute to set.

value string
Value to set the attribute to.

See:

setInterval(fn, interval) → {number}

component.jsline 1300

Creates a function that gets run every x milliseconds. This function is a wrapper around window.setInterval. There are a few reasons to use this one instead though.

  1. It gets cleared via Component#clearInterval when Component#dispose gets called.
  2. The function callback will be a Component~GenericCallback
Parameters:
Name Type Description
fn Component~GenericCallback
The function to run every x seconds.

interval number
Execute the specified function every x milliseconds.

Listens to Events:
Returns:

number -

Returns an id that can be used to identify the interval. It can also be be used in Component#clearInterval to clear the interval.

See:

setTimeout(fn, timeout) → {number}

component.jsline 1238

Creates a function that runs after an x millisecond timeout. This function is a wrapper around window.setTimeout. There are a few reasons to use this one instead though:

  1. It gets cleared via Component#clearTimeout when Component#dispose gets called.
  2. The function callback will gets turned into a Component~GenericCallback

Note: You can use window.clearTimeout on the id returned by this function. This will cause its dispose listener not to get cleaned up! Please use Component#clearTimeout or Component#dispose.

Parameters:
Name Type Description
fn Component~GenericCallback
The function that will be run after timeout.

timeout number
Timeout in milliseconds to delay before executing the specified function.

Listens to Events:
Returns:

number -

Returns a timeout ID that gets used to identify the timeout. It can also get used in Component#clearTimeout to clear the timeout that was set.

See:

show()

component.jsline 745

Show the Components element if it is hidden by removing the ‘vjs-hidden‘ class name from it.

toggleClass(classToToggle, predicateopt)

component.jsline 737

Add or remove a CSS class name from the component‘s element.

Parameters:
Name Type Attributes Description
classToToggle string  
The class to add or remove based on (@link Component#hasClass}

predicate boolean | Dom~predicate <optional>
An Dom~predicate function or a boolean

triggerReady()

component.jsline 621

Trigger all the ready listeners for this Component.

Fires:

width(numopt, skipListenersopt) → {number|string}

component.jsline 837

Get or set the width of the component based upon the CSS styles. See Component#dimension for more detailed information.

Parameters:
Name Type Attributes Description
num number | string <optional>
The width that you want to set postfixed with ‘%‘, ‘px‘ or nothing.

skipListeners boolean <optional>
Skip the componentresize event trigger

Returns:

number | string -

The width when getting, zero if there is no width. Can be a string postpixed with ‘%‘ or ‘px‘.

Type Definitions

DimensionObject

component.jsline 992

An object that contains width and height values of the Components computed style. Uses window.getComputedStyle.

Properties:
Name Type Description
width number
The width of the Components computed style.

height number
The height of the Components computed style.

GenericCallback()

component.jsline 1205

A callback that has no parameters and is bound into Components context.

This:

ReadyCallback()

component.jsline 27

A callback that is called when a component is ready. Does not have any paramters and any callback value will be ignored.

This:

Events

componentresize

component.jsline 920

Triggered when a component is resized.

Type:

dispose

component.jsline 116

Triggered when a Component is disposed.

Type:
Listeners of This Event:
Properties:
Name Type Attributes Default Description
bubbles boolean <optional> false
set to false so that the close event does not bubble up

ready

component.jsline 638

Triggered when a Component is ready.

Type:

tap

component.jsline 1135

Triggered when a Component is tapped.

Type:
时间: 2024-10-09 00:52:27

videojs文档翻译-Component的相关文章

免费视频播放器videojs中文教程

Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写的,如今videojs的版本已经更新到

Flume官方文档翻译——Flume 1.7.0 User Guide (unreleased version)中一些知识点

Flume官方文档翻译--Flume 1.7.0 User Guide (unreleased version)(一) Flume官方文档翻译--Flume 1.7.0 User Guide (unreleased version)(二) Flume Properties Property Name            Default  Description flume.called.from.service – If this property is specified then the

Flume官方文档翻译——Flume 1.7.0 User Guide (unreleased version)(二)

Flume官方文档翻译--Flume 1.7.0 User Guide (unreleased version)(一) Logging raw data(记录原始数据) Logging the raw stream of data flowing through the ingest pipeline is not desired behaviour in many production environments because this may result in leaking sensit

【转】一款开源免费跨浏览器的视频播放器--videojs使用介绍

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免费的,你可以在github很容易的获取它的最新代码. 2.使用它非常的容易,只要花

一款开源免费跨浏览器的视频播放器--videojs使用介绍

最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免费的,你可以在github很容易的获取它的最新代码. 2.使用它非常的容易,只要花几秒钟就可以架起一个视频播放页面. 3.它几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放. 4. 界面可以定制,纯javascript和css打造.说明文档也非常的详细.

android &lt;application&gt; 开发文档翻译

由于本人英文能力实在有限,不足之初敬请谅解 本博客只要没有注明"转",那么均为原创,转贴请注明本博客链接链接 <application>语法:    <application android:allowTaskReparenting=["true" | "false"]                 android:allowBackup=["true" | "false"]      

Ext JS 4 架构你的应用 第2节 (官方文档翻译)

原文地址:http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt2 [翻译 by 明明如月 QQ 605283073 本章节配套项目代码将在第3节给出] 上一节:Ext JS 4 架构你的应用 第1节 (官方文档翻译) 下一节:Ext JS4 架构你的应用 第3节 (官方文档翻译) 在上一篇文章中我们介绍了,怎样基于Ext JS构建一个 潘多拉风格的应用. 让我们探讨一下Model-View-Controller(模型-视图-控制器)架构以及怎样将其

Introduction to C++ Programming in UE4——UE4官方文档翻译与理解(一)

UE4这篇官方文档大体上讲解了UE4本身的诸多特性以及如何编写基本的C++代码,对理解UE4的编程基础内容非常有帮助,还是因为没有对于的汉语翻译.所以,这里我把这篇文档翻译出来,之后还会简洁的对其进行必要的总结.由于内容比较多,会分两个部分进行编写,持续更新~ Unreal C++ is Awesome!(虚幻4的C++是了不起的) This guide is about learning how to write C++ code in Unreal Engine. Do not worry,

videojs集成--播放rtmp流

之前说到已经把流推送过来了,这时候就可以使用videojs来进行显示播放. 首先要先有一个文件,那就是video-js.swf 因为,这种播放方式html已经不能很好的进行播放了,需要用到flash来播放,videojs在这个地方就用到了这个. 代码就是下面这样. 里面一些细节注释都有. 重点就是看<video>标签里面的内容 [html] view plain copy <!DOCTYPE html> <html lang="en"> <he