SigmaPlayer

SigmaPlayer

SigmaPlayer是一款轻巧，可自定义的视频播放器，旨在提供最小的文件大小和完整功能的无缝播放体验。它非常适合现代Web应用程序，并支持自适应流，字幕和自定义控件等高级功能。

目录?

• 安装
  • 通过NPM
  • 通过纱线
  • 通过CDN
• 用法
  • 基本用法
  • 高级配置
• 特征
• 定制
• API
  • 方法
  • 事件
  • 选项
• 贡献
• 执照

安装

通过NPM

要通过NPM安装SigmaPlayer ，请运行以下命令：

npm install SigmaPlayer

通过纱线

要通过纱线安装SigmaPlayer ，请运行以下命令：

yarn add SigmaPlayer

通过CDN

您也可以通过CDN使用SigmaPlayer ，通过在html中包含以下脚本标签：

 < script src =\" https://www.unp*k**g.com/SigmaPlayer \" > </ script >
< link rel =\" stylesheet \" href =\" https://www.unp*k**g.com/SigmaPlayer/dist/main.css \" /> 

用法?

基本用法

要使用SigmaPlayer ，请通过将视频元素或选择器字符串（例如CSS选择器）传递到构造函数来创建实例。然后，调用initialize()方法以初始化播放器并设置控件。

这是您可以使用SigmaPlayer的方法：

SigmaPlayer
const player = new SigmaPlayer (\’#my-video\’, {
sources: {
default: {
auto: \’https://path*-**to-your-video.m3u8\’,
720: \’https://path-to**-*your-video-720p.mp4\’,
1080: \’https://p*a*th*-to-your-video-1080p.mp4\’,
},
},
});
</script>\”>

 < video id =\" my-video \" > </ video >

< link rel =\" stylesheet \" href =\" https://www.unp*k**g.com/SigmaPlayer/dist/main.css \" />
< script src =\" https://cdn.j***sdelivr.net/npm/SigmaPlayer@1.0.6/dist/main.min.js \" > </ script >

< script >
    // Initialize SigmaPlayer
    const player = new SigmaPlayer ( \'#my-video\' , {
        sources : {
            default : {
                auto : \'https://p*ath*-to-*your-video.m3u8\' ,
                720 : \'https://path-**to-yo*ur-video-720p.mp4\' ,
                1080 : \'https://p*ath-to*-*your-video-1080p.mp4\' ,
            } ,
        } ,
    } ) ;
</ script >

高级配置

可以使用选项自定义SigmaPlayer 。您可以通过各种配置，例如视频源，播放速度，字幕和质量设置。

SigmaPlayer(\’#my-video\’, {
videoType: \’hls\’, // or \’dash\’ or \’mp4\’
sources: {
default: {
auto: \’https://path*-**to-your-video.m3u8\’,
720: \’https://path-to**-*your-video-720p.mp4\’,
1080: \’https://p*a*th*-to-your-video-1080p.mp4\’,
},
},
audioNames: { 1: \’English\’, 2: \’Spanish\’ }, // For DASH videos with multiple audio tracks
});
</script>\”>

 < video id =\" my-video \" > </ video >

< script >
    const player = new SigmaPlayer ( \'#my-video\' , {
        videoType : \'hls\' , // or \'dash\' or \'mp4\'
        sources : {
            default : {
                auto : \'https://p*ath*-to-*your-video.m3u8\' ,
                720 : \'https://path-**to-yo*ur-video-720p.mp4\' ,
                1080 : \'https://p*ath-to*-*your-video-1080p.mp4\' ,
            } ,
        } ,
        audioNames : { 1 : \'English\' , 2 : \'Spanish\' } , // For DASH videos with multiple audio tracks
    } ) ;
</ script > 

功能?

• 轻量级：构建尺寸仅约38kb。
• 可自定义：完全可自定义的UI和控件。
• 自适应流：基于网络速度支持HLS和DASH流动流量。
• 字幕和音轨：支持多个音频轨道和字幕轨道（用于仪表板视频）。
• 控件：包括播放，音量控制，全屏，质量选择和速度调整。

自定义?

SigmaPlayer提供了几种自定义其外观和行为的方法。

• 您可以通过从预定义的选项中选择或根据网络速度自动选择视频质量。
• 使用CSS或JavaScript自定义控件。
• 启用或禁用特定功能，例如设置菜单，速度控件或翻译选项。

自定义UI的示例

 # sigma__controls-wrapper {
    background-color : rgba ( 0 , 0 , 0 , 0.5 );
}

# sigma__play-pause {
    color : red;
}

API

方法?

• 初始化（） ：用给定配置初始化播放器。
• togglePlaystate（） ：切换视频的播放/暂停状态。
• togglefullscreen（） ：切换全屏模式。
• SetPlayBackspeed（速度） ：设置播放速度（0.5倍，1X，2X）。
• SelectQuality（质量） ：手动选择视频质量。
• SelectQualityAuto（LevelIndex） ：根据网络速度自动选择视频质量。
• Select Translation（翻译） ：选择音频翻译。
• ShowControls（） ：显示控件UI。
• HideControls（） ：隐藏控件UI。

事件

• 播放：视频开始播放时触发。
• 暂停：暂停视频时触发。
• 结束：视频结束时触发。
• 等待：视频缓冲时触发。
• 播放：视频播放时触发。
• timeupdate ：定期触发视频播放，提供当前的播放时间。

选项

• 录像类型：视频的类型（ \'mp4\' ， \'hls\' ， \'dash\' ）。
• 资料来源：视频来源和品质的映射。
• Audionames ：（可选）绘制仪表板视频的音频名称。

贡献?

总是欢迎捐款！请分配存储库，并在您想改进播放器的情况下提交拉动请求。

1. 分叉存储库
2. 创建一个新分支
3. 进行更改
4. 提交您的更改
5. 推到分支机构
6. 创建拉动请求

执照

该项目是根据MIT许可证获得许可的 – 有关详细信息，请参见许可证文件。