vlite

vlite js （发音/viːlaɪt/ ）是一个快速且轻巧的JavaScript库，用于自定义视频和音频播放器。它用本机JavaScript编写而无需依赖性，是围绕提供商和插件的API构建的，以扩展这些功能，并保持最小功能。

HTML5视频和音频播放器自动包括在内。其他提供商（例如YouTube或Vimeo）可以使用提供商API加载。插件使用相同的逻辑，可以按插件API按需加载。可以由库创建和加载其他提供商和插件。

• 如果您担心应用程序的加载性能，则该库是有意义的，因为它与竞争对手相比极为轻（仅6 kb）。
• 很少需要与HTML5，YouTube，Vimeo和Dailymotion兼容。该库默认包含仅HTML5功能，并将提供商API暴露于与其他提供商一起扩展功能。
• 如果需要特定的行为，则插件API允许扩展库功能。
• 如果您需要为所有Web浏览器的自定义皮肤创建视频或音频播放器。

与比赛相比， vlite js捆绑包的尺寸：

• 视频和音频-HTML5视频，HTML5音频，YouTube，Vimeo，DailyMotion。
• 自定义- 选择要显示的控制元素。
• 没有依赖性- 没有任何框架，用本机JavaScript编写。
• 全屏- 支持本机全屏API。
• 提供商API-使用可用的提供商或创建自己的。
• 插件API-使用可用的插件或创建自己的插件。
• 流- 支持HLS.JS流播放。
• 粘性- 支持粘性。
• 事件- 所有Web浏览器，提供商和插件的标准化事件。
• 自动加载API- YouTube，Vimeo和Dailymotion API自动由其提供商加载。
• 字幕- 支持多个字幕轨道（VTT）。
• 图片中的图片- 支持图片中的API。
• 演员- 支持Google Cast API。
• AirPlay-支持Apple Airplay API。
• 货币化- 支持Google IMA SDK。
• Hotkeys-支持热键以添加键盘快捷键。
• PLAYSINLINE-支持playsinline属性。
• SVG图标-SVG被内衬到库中，不包括精灵。
• 可访问性-W3C和A11Y有效。

您可以使用GitHub赞助商来支持此项目！ ♡

如果您有兴趣与vlite JS一起玩，则可以在Glitch上使用在线代码操场：

• HTML5视频
• html5视频hls.js
• HTML5视频与Google IMA SDK
• HTML5音频
• YouTube
• Vimeo
• Dailymotion

该项目包括目录examples中vlite js实现的几个示例。运行以下命令以构建示例的资产：

npm run build && npm run build:example

NPM是推荐的安装方法。使用以下命令在项目中安装vlite js ：

npm install vlite js --save-dev

yarn add vlite js --dev

您还可以下载它，并将其与脚本标签一起作为ESM。

 < link href =" https://cdn.j**sdeli*vr.net/npm/vlitejs@6/dist/ vlite .css " rel =" stylesheet " crossorigin />
< script type =" module " >
  import vlite js from 'https://cdn.*jsde*li*vr.net/npm/vlitejs@6' ;
</ script > 

 < video id =" player " src =" <path_to_video_mp4> " > </ video > 

 < audio id =" player " src =" <path_to_audio_mp3> " > </ audio > 

 < div id =" player " data-youtube-id =" <video_id> " > </ div > 

 < div id =" player " data-vimeo-id =" <video_id> " > </ div > 

 < div id =" player " data-dailymotion-id =" <video_id> " > </ div >

导入vlite js StyleHeet和JavaScript库作为ES6模块。

 import ' vlite js/ vlite .css' ;
import vlite js from ' vlite js' ;

vlite js构造函数接受以下参数：

用CSS选择器字符串初始化播放器。

 new vlite js ( '#player' ) ;

或者，用HTMLElement初始化播放器。

 new vlite js ( document . querySelector ( '#player' ) ) ; 

该配置器的第二个参数是具有以下参数的可选对象：

 new vlite js ( '#player' , {
  options : { } ,
  onReady : function ( player ) { } ,
  provider : 'html5' ,
  plugins : [ ]
} ) ;

可以使用以下参数自定义播放器控件：

自定义的autoHide定义示例和poster选项。

 new vlite js ( '#player' , {
  options : {
    autoHide : true ,
    poster : '/path/to/poster.jpg'
  }
} ) ;

播放器准备就绪时将自动执行onReady功能。 HTML5视频和音频收听canplay|loadedmetadata事件。 YouTube，Vimeo和Dailymotion提供商会收听其API返回的onready活动。

该功能将player参数视为播放器实例。您可以使用它与玩家实例和播放器方法进行交互。

准备就绪时muted的示例：

 new vlite js ( '#player' , {
  onReady : function ( player ) {
    player . mute ( ) ;
  }
} ) ; 

vlite js在.v- vlite元素上公开以下本机Event 。所有提供商的活动都是标准化的。每个插件都有其自己的事件，这些事件在其专用文档中详细介绍。

当媒体触发play事件时，听众的示例。

 new vlite js ( '#player' , {
  onReady : ( player ) => {
    player . on ( 'play' , ( ) => {
      // The video starts playing
    } ) ;
  }
} ) ;

播放器实例公开以下方法，当玩家准备就绪时可访问。

媒体duration恢复的示例。

 new vlite js ( '#player' , {
  onReady : ( player ) => {
    player . getDuration ( ) . then ( ( duration ) => {
      // The duration is available in the "duration" parameter
    } ) ;
  }
} ) ;

播放器公开了一些自定义CSS属性，在.v- vlite选择器下局部范围范围。您可以使用它们来自定义设计。

非常感谢Victor Schirm的vlite js徽标。

vlite js已获得MIT许可证的许可。

由 @yoriiis创建。