vlite

vlite JS

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

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

为什么要vlite js？

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

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

笔记

• vlite js 5.0.1
• plyr 3.7.8
• videojs 8.3.0

特征

• 视频和音频-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

安装

警告

vlite JS@6是ESM，并使用node.js软件包exports 。

NPM

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

npm install vlite js --save-dev

yarn add vlite js --dev

警告

最小支持的Node.js版本为16.20.0 。

CDN

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

vlite.css\” rel=\”stylesheet\” crossorigin />
<script type=\”module\”>
import vlite js from \’https://cdn.*js*deli*vr.net/npm/vlitejs@6\’;
</script>\”>

 < 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 > 

提示

您可以在jsdelivr.com/package/npm/ vlite JS上浏览NPM软件包的来源。

它如何工作

html

HTML5视频

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

HTML5音频

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

YouTube

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

Vimeo

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

Dailymotion

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

初始化

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

vlite .css\’;
import vlite js from \’ vlite js\’;\”>

 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\' ) ) ; 

配置

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

vlitejs(\’#player\’, {
options: {},
onReady: function (player) {},
provider: \’html5\’,
plugins: []
});\”>

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

选项

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

笔记

• 仅视频。
• ²Vimeo提供商需要一个或Pro帐户才能使用此功能（请参阅Vimeo计划）。
• ³请参阅YouTube嵌入式选项和Vimeo嵌入选项。
• ⁴iPhone上尚未支持全屏API。

autoplay参数会自动激活muted选项，因为API只能由用户手势启动（请参阅自动播放策略更改）。

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

vlitejs(\’#player\’, {
options: {
autoHide: true,
poster: \’/path/to/poster.jpg\’
}
});\”>

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

玩家准备好了

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

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

准备就绪时muted的示例：

vlitejs(\’#player\’, {
onReady: function (player) {
player.mute();
}
});\”>

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

提示

onReady功能也可以使用箭头功能编写。

事件

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

笔记

• 仅视频。

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

vlitejs(\’#player\’, {
onReady: (player) => {
player.on(\’play\’, () => {
// The video starts playing
});
}
});\”>

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

方法

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

媒体duration恢复的示例。

vlitejs(\’#player\’, {
onReady: (player) => {
player.getDuration().then((duration) => {
// The duration is available in the \”duration\” parameter
});
}
});\”>

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

自定义CSS属性

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

贡献者

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

执照

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

由 @yoriiis创建。