meisterplayer下载-meisterplayer中文版下载-源码网

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：

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。

下载源码

从 GitHub 克隆

通过命令行克隆项目:

git clone https://github.com/meisterplayer/meisterplayer.git

wavencoderjs

2025-08-10

html5 audio driver