README

纯JavaScript查看器。目前它可以显示视频、图形和PDF格式的书籍。

安装

composer reqire avtomon/player.js

描述

该模块需要一个带有预定义类之一的HTML块

• video - 将创建视频播放器；
• image - 图像查看器； book - PDF格式书籍的查看器

如果有这样的块，创建一个块非常简单

假设这样的块是

<div class= "video" ></div>

那么在 simplest case 中创建播放器对象的代码

let player = new Player (document.querySelector('div.video'));

构造函数的第二个参数可以是一个配置对象——实现以下接口的对象

interface IPlayerOptions {

/**
     * Path to file with styles
     */
    readonly styleFilePath?: string;

/**
     * Select the first item when initializing the player
     */
    readonly activate?: boolean;

/**
     * Class of viewing unit
     */
    readonly mainWrapperClass?: string;

/**
     * Class block preview
     */
    readonly imageWrapperClass?: string;

/**
     * Width of the scroll buttons
     */
    readonly scrollButtonsWidth?: number;

/**
     * Error of click on scroll buttons
     */
     readonly scrollButtonsPadding?: number;

/**
      * Images with this class are not loaded into the player
      */
      readonly imageStopClass?: string;
}

加载到查看器中的每个资源都有一个图像形式的预览。实际上，在图像的形式中，新的元素被添加到播放器中，然后转换为内部格式。

您可以通过以下方式向播放器添加元素

player.addItem(image, true);

元素始终以HTMLImageElement对象的形式添加，它应该包含必要的最都是

• src - 图像路径；
• title - 下载资源的名称；
• data-object-src - 表示图像的资源路径（视频、图片或书籍的链接）。

以及可能包含的属性

• data-type - 此属性可以用于指定可选的资源类型，如果您想按类型划分资源。

这将创建带有后缀的 <span> 元素 + 默认情况下，将 class 属性设置为 img 内部HTML代码将是

<I class= "material-icons" >close</i>

如果您使用materializecss 库，则此类标记元素将添加播放器元素的删除按钮。

第二个参数指定是否在添加元素后将其移动到同一行。

删除项

deleteItem(index);

其中 index 是在播放器中删除项的索引。

如果初始化玩家时模块支持，则已经包含具有必要属性的图像，它们将自动添加到播放器中，除非它们包含由玩家配置的 imageStopClass 指令指定的类（IPlayerOptions），默认类为 no-image。

note: 如果您计划自行开发项目并使用 script build.sh 构建，您将需要安装全局范围内的 Gulp 及其在 script init.sh 中指定的插件，并运行 script init.sh 进行链接。或者直接将所有依赖项安装到项目中。