Meister Web播放器
可插入的JavaScript Web播放器 – 版本v5.2.3。
这是Meister核心。它需要其他插件才能设置。本指南将帮助您启动并播放一个简单的MP4视频。
警告:如果您对NODE,NPM不了解,并且只需要为您的网站提供视频/音频播放器,则应阅读本指南进行设置。
安装
使用NPM安装:
meisterplayer \”>
npm install @ meisterplayer / meisterplayer
然后导入它们:
meisterplayer \’\”>
import Meister from \'@ meisterplayer / meisterplayer \'
使用<script>标签安装:
< script src =\" Meister.js \" >
入门
开始,只需在您的页面中包含Meister.js即可。有两种设置Meister播放器的方法。使用<script>标签和ES6模块的使用。我们将首先解释<script>标签版本。
Meister本身无法播放视频,至少需要一个播放器插件和媒体插件。我们将在下面的示例中显示如何添加这些插件以获取播放MP4文件。我们将使用以下插件:
- Meister的基础(这是MP4播放的插件)
- Meister的HTML5播放器(这是使用HTML5播放的插件)
使用<script>标签设置
以下片段可用于初始化Meister Player:
<script src="Meister.js"></script>
<script src="BaseMedia.js"></script>
<script src="Html5Player.js"></script>
<script src="StandardUi.js"></script>
</head>
<body>
<div id="player"></div>
<script>
// Initialize the meister player
// Meister uses the querySelector to get the dom element.
var <span class=\” notranslate keguazi>meisterplayer = new Meister(\’#player\’, {
// Configures Meister player to use these plugin.
// We will later go in depth what these are for.
BaseMedia: {},
Html5Player: {},
});
// Configures meister to play the mp4 media item.
meisterplayer .setItem({
src: \’INSERT_URL_TO_MP4_HERE\’,
type: \’mp4\’, // Tells meister we will play an mp4 item.
});
// Tells meister we are ready to load the player and start playing
meisterplayer .load();
</script>
</body>
</html>\”>
<!DOCTYPE html > < html > < head > < title > Meister player example </ title > <!-- It\'s important that Meister.js will be loaded before the plugins --> < script src =\" Meister.js \" > </ script > < script src =\" BaseMedia.js \" > </ script > < script src =\" Html5Player.js \" > </ script > < script src =\" StandardUi.js \" > </ script > </ head > < body > < div id =\" player \" > </ div > < script > // Initialize the meister player // Meister uses the querySelector to get the dom element. var meisterplayer = new Meister ( \'#player\' , { // Configures Meister player to use these plugin. // We will later go in depth what these are for. BaseMedia : { } , Html5Player : { } , } ) ; // Configures meister to play the mp4 media item. meisterplayer . setItem ( { src : \'INSERT_URL_TO_MP4_HERE\' , type : \'mp4\' , // Tells meister we will play an mp4 item. } ) ; // Tells meister we are ready to load the player and start playing meisterplayer . load ( ) ; </ script > </ body > </ html >
这是与Meister建立设置的基本方法。稍后,我们将深入了解这些功能的准确作用以及如何将Meister配置为自己的喜好。
使用ES6模块设置
以下示例显示了如何使用上述插件使用ES6模块在Meister播放器中加载。
首先通过NPM安装Meister:
npm install -S @npm-wearetriple/ meisterplayer
对于其他插件,您还可以安装NPM:
npm install -S @npm-wearetriple/meister-plugin-basemedia
npm install -S @npm-wearetriple/meister-plugin-html5player
npm install -S @npm-wearetriple/meister-plugin-standardui
meisterplayer\’;
import BaseMedia from \’@npm-wearetriple/meister-plugin-basemedia\’;
import Html5Player from \’@npm-wearetriple/meister-plugin-html5player\’;
import StandardUi from \’@npm-wearetriple/meister-plugin-standardui\’;
// Initialize the meister player
// Meister uses the querySelector to get the dom element.
const meisterplayer = new Meister(\’#player\’, {
// Configures Meister player to use these plugin.
// Uses pluginName as object name to be future proof.
[BaseMedia.pluginName]: {},
[Html5Player.pluginName]: {},
});
// Configures meister to play the mp4 media item.
meisterplayer .setItem({
src: \’INSERT_URL_TO_MP4_HERE\’,
type: \’mp4\’, // Tells meister we will play an mp4 item.
});
// Tells meister we are ready to load the player and start playing
meisterplayer .load();
\”>
import Meister from \'@npm-wearetriple/ meisterplayer \' ; import BaseMedia from \'@npm-wearetriple/meister-plugin-basemedia\' ; import Html5Player from \'@npm-wearetriple/meister-plugin-html5player\' ; import StandardUi from \'@npm-wearetriple/meister-plugin-standardui\' ; // Initialize the meister player // Meister uses the querySelector to get the dom element. const meisterplayer = new Meister ( \'#player\' , { // Configures Meister player to use these plugin. // Uses pluginName as object name to be future proof. [ BaseMedia . pluginName ] : { } , [ Html5Player . pluginName ] : { } , } ) ; // Configures meister to play the mp4 media item. meisterplayer . setItem ( { src : \'INSERT_URL_TO_MP4_HERE\' , type : \'mp4\' , // Tells meister we will play an mp4 item. } ) ; // Tells meister we are ready to load the player and start playing meisterplayer . load ( ) ;
配置
以下选项可用于配置Meister Core。所有选项都将在global:{}
语言[string] (默认:\’en\’)
您希望玩家的语言。
例子:
var meisterInstance = new Meister ( \'#player\' , { global : { language : \'nl\' // Set the Meister player language to dutch. } } ) ;
i18nenabled [boolean] (默认:false)
打开I18N而不是自定义本地化API。在将来的版本中,默认情况下将设置为true。
例子:
var meisterInstance = new Meister ( \'#player\' , { global : { i18nEnabled : true , } } ) ;
自动播放[boolean] (默认:false)
Autoplays视频而不是单击播放
var meisterInstance = new Meister ( \'#player\' , { global : { autoplay : true , } } ) ;
FullScreenondBublick [boolean] (默认:false)
当用户双击播放器时,允许玩家全屏。这也将iosPlaysInline设置为True,以支持此功能。
var meisterInstance = new Meister ( \'#player\' , { global : { fullscreenOnDoubleClick : true , } } ) ;
控制[布尔人] (默认:true)
启用/禁用控件。
var meisterInstance = new Meister ( \'#player\' , { global : { controls : false , // Now the controls are not shown. } } ) ;
调试[boolean] (默认:false)
定义Meister是否处于调试模式是或否。
var meisterInstance = new Meister ( \'#player\' , { global : { debug : true , // Meister is now in debug mode. } } ) ;
DisableLoaddingAdad [boolean] (默认:false)
广告播放时禁用load()函数调用。因此,它可以在广告中断过程中禁用内容的切换。
API
我们将在此处解释API,以了解Meister上的所有方法
Meister实例属性
Meister(查询:字符串|元素,配置:对象): Meister
Meister的构造者。
- 查询:字符串 – 选择要用于Meister的
<div>元素的DOM查询 - 查询:元素 – 您要使用的DOM元素。这是使用查询:字符串的替代方法。
- 配置:对象 – 配置对象初始化插件并将其配置为您的喜好。检查每个插件的文档以配置插件。
返回Meister的实例
例子:
meisterplayer = new Meister(\’#player\’, {
// Configuration per plugin goes here.
});
// Using the query:Element method:
var meisterplayer = new Meister(document.getElementById(\’player\’), {
// Configuration per plugin goes here.
});
\”>
// Using the query:String method: var meisterplayer = new Meister ( \'#player\' , { // Configuration per plugin goes here. } ) ; // Using the query:Element method: var meisterplayer = new Meister ( document . getElementById ( \'player\' ) , { // Configuration per plugin goes here. } ) ;
方法:
setItem(item: object <mediaObject> );
设置您要播放的媒体项目。配置每个插件可能会有所不同,但基本项目对象具有SRC&Type。
MediaObject:
- SRC:字符串:媒体的URL。
- 类型:字符串:媒体的类型。检查插件文档,以查看您必须输入哪种类型。
- …:任何:MediaObject可以有更多选项,但是每个插件的不同之处。请检查插件文档以获取更多选项。
示例(需要MP4插件):
meisterInstance . setItem ( { src : \'https://example*.c**om/video.mp4\' , type : \'mp4\' } ) ;
setPlayList(项目: array [对象: <mediaObject> ])
与setItem相同(对象: MediaObject )仅此方法允许设置多个项目。 Meister将一一漫步在项目中(触发结束事件时)。
请参阅setItem(对象: MediaObject )以获取MediaObject的文档
例子:
meisterInstance . setPlaylist ( [ { src : \'https://example*.c**om/video.mp4\' , type : \'mp4\' } , { src : \'https://*example.**com/anotherVideo.mp4\' , type : \'mp4\' } ] ) ;
SwitchItem(项目:对象:<MediaObject> )
允许将项目切换到Meister内部。这样,您可以在已经播放其他项目的同时加载新项目。
请参阅setItem(对象: MediaObject )以获取MediaObject的文档
例子:
meisterInstance . switchItem ( { src : \'https://example*.c**om/video.mp4\' , type : \'mp4\' } ) ;
加载()
加载setItem设置的媒体项目。或由setPlaylist设置的播放列表中的第一个项目。
例子:
meisterInstance . load ( ) ;
破坏()
破坏Meister播放器及其插件。
例子:
meisterInstsance . destroy ( )
播放(triggerBouser:boolean = false)
开始播放媒体。
- triggerByuser: boolean (默认错误):定义play()是否已由用户触发。 (分析目的)。
例子:
meisterInstsance . play ( )
暂停(triggerBouser:boolean = false)
暂停媒体的播放。
- triggerByuser: boolean (默认错误):定义用户是否触发了pape()。 (分析目的)。
例子:
meisterInstsance . pause ( )
requestfullscreen()
请求窗口,如果我们可以将播放器全屏制作。此功能只能是由于用户操作而调用的。否则,浏览器将拒绝请求。
例子:
myDomElement . onclick = ( ) => { meisterInstance . requestFullscreen ( ) }
取消screen()
退出全屏模式。
例子:
meisterInstance . cancelFullscreen ( ) ;
ON(钩:字符串,处理程序:函数(事件:任何),呼叫者?:字符串):eventhandle
聆听Meister内部发生的事件。对于所有挂钩,请检查事件部分。另外,您可以检查每个插件可用的事件。
- 钩子:字符串:您要听的事件的名称。
- 处理程序:功能(事件:任何):事件的回调。每个事件的回报是不同的。
- 呼叫者?:字符串:事件的呼叫者。如果抛出异常,则用于跟踪,因此您可以看到发生异常的位置。
返回EventHandle :
- ID:编号事件的ID。
- 钩子:将用于此事件的钩子串。
例子:
// Without caller set meisterInstance . on ( \'playerPause\' , ( ) => { console . log ( \'The player is now paused\' ) ; } ) ; meisterInstance . on ( \'playerPlay\' , ( ) => { console . log ( \'The player triggered play\' ) ; } , \'MyScript\' ) ;
一个(挂钩:字符串,处理程序:函数(事件:任何),呼叫者?:字符串):eventhandle
这与on(钩:字符串,处理程序:函数(事件:任何),呼叫者?:string)相同。唯一的区别是此功能仅听一次事件。
返回EventHandle :
- ID:编号事件的ID。
- 钩子:将用于此事件的钩子串。
例子:
// Without caller set meisterInstance . one ( \'playerPause\' , ( ) => { console . log ( \'The player is now paused\' ) ; } ) ; meisterInstance . one ( \'playerPlay\' , ( ) => { console . log ( \'The player triggered play\' ) ; } , \'MyScript\' ) ;
触发器(钩子:string,… args)
触发事件到指定的钩子。
- 钩子:字符串 – 您要听的钩子检查。对于所有挂钩,请检查事件部分。另外,您可以检查每个插件可用的事件。
- … args:任何 – 这是给听众处理的。
例子:
meisterInstance . trigger ( \'myCustomEvent\' , { someProps : \'test\' } ) ;
删除(事件:EventHandle |数组)
从活动堆栈中删除所有给定的听众。
- 事件:eventhandle | array-由
on()和one()返回的对象
例子:
const event = meisterInstance . on ( ... ) ; meisterInstance . remove ( event ) ;
禁用(钩子:字符串,处理程序:功能(事件:任何))
on()禁用事件,而one()不会使用给定的钩子触发。您可以使用handler程序参数仍处理事件。
- 钩子:字符串 – 您要听的钩子检查。对于所有挂钩,请检查事件部分。另外,您可以检查每个插件可用的事件。
- 处理程序:功能(事件:任何):事件的回调。每个事件的回报是不同的。
例子
meisterInstance . disable ( \'playerPlay\' , ( ) => { // Now only this function gets called when meister triggers \'playerPlay\'. } ) ;
启用(钩:字符串)
启用事件,以便可以再次使用。
- 钩子:字符串 – 您要听的钩子检查。对于所有挂钩,请检查事件部分。另外,您可以检查每个插件可用的事件。
例子:
meisterInstance . enable ( \'playerPlay\' ) ;
错误(消息:字符串,代码:字符串=\’err-9001\’,选项:object = {})
向Meister播放器丢下错误。这也将触发事件,以便插件可以处理此事件(例如,将错误记录到服务器或显示其他UI)。
- 消息:字符串 – 要输出的错误
- 代码:字符串 – 错误消息的标识符。 (err-9001 =未知错误)
- 选项:对象 – 您要在活动中发送的选项。每个插件可能会有所不同。
例子:
meisterInstance . error ( \'An error occured\' , \'TST-1234\' ) ;
静态寄存器Plugin(名称:字符串,插件:对象)
用Meister注册插件。
- 名称:字符串 – 注册的插件的名称。注意:也将用作配置对象。
- 插件:对象 – Meister插件对象兼容Meister(类/对象等)
例子:
class TestPlugin extends Meister . ParserPlugin { constructor ( config ) { // Will output \'hello\' console . log ( config . param ) ; } static get pluginName ( ) { return \'testName\' ; } } Meister . registerPlugin ( TestPlugin . pluginName , TestPlugin ) ; const meisterInstance = new Meister ( \'#player\' , { // Notices that this is binded to the pluginName testName : { param : \'hello\' } } ) ;
Getters&Setters:
获取版本:字符串
返回当前版本的Meister。产生\"vX.YZ\"
例子:
// Outputs v5.2.3 console . log ( meisterInstance . version ) ;
获取/设置ShowControls:布尔值
- 设置:隐藏/显示控件。
- 获取:返回当前控件状态。
例子:
// Hides the controls meisterInstance . showControls = false ; // Shows the controls meisterInstance . showControls = true ;
获取PlayerMode:字符串
返回当前播放器模式,这可以是“音频”或“视频”
例子:
console . log ( meisterInstance . playerMode ) ;
获取/设置卷:数字
获取/设置Meister当前的播放卷。 Meister还将记住此卷,因此用户在每个页面上具有相同的卷。
- 设置:数字 – 您希望其设置为0到1之间的卷
- 获取:数字 – 当前播放卷在0到1之间
例子:
meisterInstance . volume = 0.7 ;
获取/设置静音:布尔值
获取/设置当前播放器静音模式。
- 静音:布尔亚人 – 忠实于玩家。假静音。
例子:
// The player is now silent meisterInstance . muted = true ; // The player is now playing the audio again meisterInstance . muted = false ;
玩:布尔值
如果玩家当前正在播放,将返回。
console . log ( meisterInstance . playing ) ;
获取CurrentItem:MediaObject
返回当前的播放媒体项目。
console . log ( meisterInstance . currentItem ) ;
获取持续时间:数字
返回媒体的持续时间。
console . log ( meisterInstance . duration ) ;
获取/设置当前时间:数字
获取/设置媒体的当前时间。
- 当前时间:数字 – 您想寻找的时间。
例子:
// Seeks to the given moment. meisterInstance . currentTime = 10.2 ;
获取Isfullscreen:布尔值
返回玩家是否处于全屏模式。
例子:
console . log ( meisterInstance . isFullscreen ) ;
获取PlayerType:String
获取当前的玩家类型。例如,这是“ HTML5”。
例子:
console . log ( meisterInstance . playerType ) ;
静态获取实例:数组<object {id:number,实例:meister}>
将返回页面上Meister运行的所有实例。
例子:
console . log ( Meister . instances ) ;
事件
以下事件可用于通过on , one并在Meister上trigger功能来聆听/触发:
广告活动
adbreakstarted-> {ad:any,…}
触发广告休息开始播放时(从内容到广告时)
返回:
- AD:任何 – 有关当前播放广告的信息。
adbreaked-> {ad:any,…}
触发广告中断后。 (从广告到内容时)
返回:
- AD:任何 – 有关当前播放广告的信息。
adstarted-> {ad:any,…}
当广告中启动广告时,触发了AD Break(在广告中断中的每个广告中触发)。
返回:
- AD:任何 – 有关当前播放广告的信息。
抚养 – > {ad:any,…}
当广告在AD Break结束时触发(在广告中断中,这是在AD中断的每个广告上触发的)。
返回:
- AD:任何 – 有关当前播放广告的信息。
adtimeupdate-> {currenttime:数字,持续时间:数字}
每次完成广告时间更新时,触发。
- 当前时间:数字 – 当前时间相对于AD。
- 持续时间:数字 – 广告的持续时间。
adcuepoints-> {点:任何}
触发有关广告点的信息时触发。这些要点是计划的广告中断。
- 积分:任何 – 计划的广告点。
控制事件
requestPlay-> {?triggerByuser:boolean}
触发何时进行游戏请求。
- TriggerBouser:boolean-这是用户操作的事件结果。
requestSeek-> {?相对点:number,?timeOffset:number}
触发何时完成请求。
- “相对位置:数字 – (可选)您想寻求相对于持续时间的百分比的位置
- ?timeOffset:数字 – (可选)您要向前迈进的秒数(正数)/向后(负数)
requestPause-> {?triggerByuser:boolean}
触发暂停请求时。
- TriggerBouser:boolean-这是用户操作的事件结果。
requestBitrate-> {bitrateIndex:number}
触发何时已完成请求设置比特率
- BitRateIndex:number-选择的比特率的索引-1是自动。
项目事件
itemLoadPrevented–> {错误:字符串}
当广告播放时,触发负载试图完成(以及配置选项disableLoddingAdad设置为true)。
- 错误:字符串 – 阻止负载的原因。
项目负载 – > {item:MediaObject}
插件上的load()完成后触发。这并不意味着视频还可以播放。
- 项目:MediaObject-加载的项目。
- MediaObject: Object <{src:String,type:string,…}> – 项目对象
项目未加载
插件上的unload()完成后触发。
itemTimeInfo-> {islive:boolean,hasdvr:boolean,持续时间:number}
触发何时知道其他时间信息。建议将其用于正确表示时间。
- Islive:布尔值 – 视频是否现场。
- hasdvr:布尔值 – 视频是否具有DVR窗口。
- 持续时间:数字 – 视频的持续时间。
itembitrates-> {bitrates:array,currentIndex:numbers}
当可用的比特率时,触发。
- 比特率:数组<object {bitrate:number,index:number}> – 所有可用比特率的数组
- CurrentIndex:数字 – 当前选择的比特率索引。
itemImageStream-> {图像:array <object {src:string,strate:number,end,end:number}>}
当有图像流可用时触发。它可以用来在时间轴上显示。
- 图像:数组<object {…}> – 所有可用于UI的图像
- SRC:字符串 – 图像的SRC。
- 开始:数字 – 相对于持续时间的开始时间。
- 结束:数字 – 持续时间的结束时间。
玩家事件
玩家创造
当创建玩家并可以使用时,触发了。
PlayerDestroy
当玩家从Meister卸下时,触发。
playerTimeUpdate-> {purrestime:number,持续时间:number}
发生时间更新时触发。
- 当前时间:数字 – 媒体中玩家的当前时间。
- 持续时间:数字 – 媒体项目的持续时间。
PlayerPlay-> {triggerByuser:boolean}
当媒体的播放暂停后开始,触发媒体时。也就是说,在先前的停顿事件后恢复播放时。
玩家玩
当媒体开始演奏时(第一次,暂停后,或者结束后首次重新启动)触发。
PlayerFirstplay
当项目第一次开始播放时,触发。
播放器编辑
当项目结束并且播放按钮再次点击时,触发。
plansepause-> {?类型:字符串,?triggerBouser:boolean}
当播放暂停时触发。
- 类型:字符串 – 哪种媒体类型暂停了项目
- TriggerBouser:布尔值 – 如果暂停是由用户操作引起的。
PlayerSeek-> {相对位置:数字,当前时间:数字,持续时间:数字}
触发何时搜索
- 相对位置:数字 – 相对于持续时间(百分比)的位置
- 当前时间:数字 – 新的当前时间
- 持续时间:数字 – 媒体项目的当前持续时间。
玩家
当寻求操作开始时触发。
playernudge-> {TotalNudges:number}
触发推动时触发。这通常是当玩家无法克服媒体项目中的差距的时候。
- 总名称:数字 – 完成的午睡量。
播放器
播放完成后触发。
PlayerError-> {MediaError:Any}
当播放当前项目发生错误时触发。
- MediaError:任何 – 媒体错误。
Playervolumechange
当音量变化时触发(何时设置了卷时和更改静音属性时)。
playerfullscreen
当浏览器切换到全屏模式时,触发时。
playersWitchBitrate-> {newBitrate:number,newbitrateEndex:number}
触发新的比特率请求时。
- newbitrate:数字 – 选择的新比特率
- NewBitrateIndex:Number-新的选定比特率索引。
playerautoswitchbitrate-> {newbitrate:number,newbitrateEndex:number}
触发何时自动选择新的比特率。
- newbitrate:数字 – 选择的新比特率
- NewBitrateIndex:Number-新的选定比特率索引。
PlayerProgress-> Medialement:HTMLMediaElement | Any
定期触发,以告知感兴趣的人下载媒体的进度。有关已下载的媒体的当前量的信息可在媒体元素的缓冲属性中获得。
- Medialement:htmlmediaelement |任何 – 媒体元素本身。
PlayerLoadedMetadata
当媒体的元数据完成加载时,触发了;现在,所有属性都包含尽可能多的有用信息。
PlayerDurationChange
当元数据加载或更改时,触发器触发,表明培养基的持续时间发生了变化。例如,当媒体加载足够多以至于已知持续时间时,这将发送。
播放器
当玩家缓冲时触发
PlayerBufferedEnough
当玩家足够缓冲以继续播放时,触发。
播放列表活动
playlistinfo-> {currentIndex:数字,长度:数字}
通报我们在播放列表中的位置。
- CurrentIndex:数字 – 播放列表中的当前索引。
- 长度:数字 – 播放列表的长度。
PlayListNext
当要求播放列表中的下一个项目时,触发。这主要是由UI触发的,而不是由播放列表本身触发的。
playlistprevious
请求播放列表中的上一个项目触发。这主要是由UI触发的,而不是由播放列表本身触发的。
playlistMetadata->项目:MediaObject
当播放列表中加载新项目时,触发。
- 项目:MediaObject-加载的项目。
- MediaObject: Object <{src:String,type:string,…}> – 项目对象
uiready-> {pluginspace:element}
告诉播放器UI已准备就绪,并为其他UI插件提供了在给定的插件中渲染UI的机会。
- 插件空间:元素 – 元素用户可以用来将节点插入。
uipluginInserted-> {ICON:字符串,名称:字符串}
当将Uiplugin插入插件空间时,触发。
- 图标:字符串 – 图标的URL。
<l
