README

Kiwa Source Collection

Kiwa Source Collection 使创建具有多个来源的 HTML audio、picture 和 video 元素变得简单。

安装

此库是为与 Composer 一起使用而制作的。通过运行 $ composer require kiwa/source-collection 将其添加到您的项目中。

使用

创建图片集合

要自动运行库，启用自动搜索并告诉根文件夹的位置，其中存储了所有图像或视频文件

<?php

use Kiwa\SourceCollection\Picture;

Picture::enableAutoSearchGenerally(
    'path/to/dir'
);

之后，创建一个带有您想要打印的文件名的新的图片对象。此路径可以是相对路径。

<?php

$picture = new Picture('/build/images/my-image.jpg');

库将搜索具有相同名称的文件，并使用它们作为额外来源。然后打印对象

echo $picture; // or $picture->getPicture()

根据可用的图像，输出可能看起来像这样

<picture>
    <source srcset="/build/images/my-image.webp" type="image/webp"/>
    <source srcset="/build/images/my-image.jpg" type="image/jpeg"/>
    <img src="/build/images/my-image.jpg"/>
</picture>

创建视频集合

创建视频元素的方式相同

<?php

use Kiwa\SourceCollection\Video;

Video::enableAutoSearchGenerally(
    'path/to/dir'
);

echo new Video('/some/path/test-file.mp4');

这将导致

<video>
    <source src="/some/path/test-file.mp4" type="video/mp4"/>
    <source src="/some/path/test-file.mov" type="video/quicktime"/>
</video>

创建音频集合

创建音频元素的方式相同

<?php

use Kiwa\SourceCollection\Audio;

Audio::enableAutoSearchGenerally(
    'path/to/dir'
);

echo new Audio('/some/path/test-file.mp3');

这将导致

<audio>
    <source src="/some/path/test-file.mp3" type="audio/mpeg"/>
    <source src="/some/path/test-file.ogg" type="audio/ogg"/>
</audio>

选项

手动模式

您不需要使用自动模式。相反，您可以通过自己的方式添加源文件

<?php

use Kiwa\SourceCollection\Picture;

$picture = new Picture('/build/images/my-image.jpg');
$picture->addSourceFile('/build/images/my-image.webp');

属性

构造函数和 addSourceFile 方法有一个第二个参数，可以用于添加 HTML 参数

<?php

use Kiwa\SourceCollection\Picture;

echo new Picture(
    '/build/images/my-image.jpg',
    [
        'alt' => 'This is a alt text',
        'title' => 'This is a title text'
    ]
);

这将导致

<picture>
    <source srcset="/build/images/my-image.jpg" type="image/jpeg"/>
    <img src="/build/images/my-image.jpg" alt="This is a alt text" title="This is a title text"/>
</picture>

帮助

如果您有任何问题，请随时通过 hello@bitandblack.com 联系我们。

有关 Bit&Black 的更多信息，请参阅 www.bitandblack.com。