侧边栏壁纸
  • 累计撰写 7 篇文章
  • 累计创建 8 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录
IT

FoF Upload 适配视频、音频

deadmau5v
2022-05-24 / 0 评论 / 0 点赞 / 93 阅读 / 764 字

测试版本 Flarum1.2.1

先看结果

image-1653329314847

开始修改

1、新增resources文件

打开/论坛根目录/vendor/fof/upload/resources/templates/
新建或下载 audio.blade.phpvideo.blade.php


<figure id='fof-upl-audio' class="upl-tpl" data-uuid="{@uuid}">
    <audio controls style="width: 100%;">
        <source src="{@url}" type="audio/mpeg">你的浏览器不支持 HTML5 音频,请使用 Chrome \Edge \ Vivaldi 浏览器访问。</audio>
    <figcaption style="text-align: center;">
        <span class="upl-title"><i class="far fa-file-audio"></i>{SIMPLETEXT1}</span>
        <span class="upl-size" style="margin-left: 10px;"><i class="fas fa-cloud-download-alt"></i>{SIMPLETEXT2}</span>
        <span class="upl-link"><a href="{@url}" title="{SIMPLETEXT1}" target=_blank><i class="fas fa-external-link-alt"></i></a></span>
    </figcaption>
</figure>
<figure id='fof-upl-video' class="upl-tpl" data-uuid="{@uuid}" style="margin-inline-start: 10px;margin-inline-end: 10px;border-radius: 10px;">
	<video controls style="width: 100%;border-radius: 20px 20px 0 0;"><source src="{@url}" type="video/mp4">你的浏览器不支持 HTML5 视频,请使用 Chrome \Edge \ Vivaldi 浏览器访问。</video>
  <figcaption style="text-align: center;background: #4d698e;color: #fff;border-radius: 0 0 20px 20px;padding-top: 5px;padding-bottom: 5px;">
    <span class="upl-title"><i class="far fa-file-video"></i>{SIMPLETEXT1}</span>
    <span class="upl-size" style="margin-left: 10px;"><i class="fas fa-cloud-download-alt"></i>{SIMPLETEXT2}</span>
    <span class="upl-link"><a href="{@url}" title="{SIMPLETEXT1}" target=_blank><i class="fas fa-external-link-alt" style="color: #fff;"></i></a></span>
  </figcaption>
</figure>

2、新增Templates文件

打开 /论坛根目录/vendor/fof/upload/src/Templates/
新建或下载 AudioTemplate.phpVideoTemplate.php

<?php

namespace FoF\Upload\Templates;

class AudioTemplate extends AbstractTextFormatterTemplate
{
    /**
     * @var string
     */
    protected $tag = 'audio';

    /**
     * {@inheritdoc}
     */
    public function name(): string
    {
        return 'Audio';
    }

    /**
     * {@inheritdoc}
     */
    public function description(): string
    {
        return 'MP3 Audio Template';
    }

    /**
     * The xsl template to use with this tag.
     *
     * @return string
     */
    public function template(): string
    {
        return $this->getView('fof-upload.templates::audio');
    }

    /**
     * The bbcode to be parsed.
     *
     * @return string
     */
    public function bbcode(): string
    {
        return '[upl-audio uuid={IDENTIFIER} size={SIMPLETEXT2} url={URL}]{SIMPLETEXT1}[/upl-audio]';
    }
}

<?php

namespace FoF\Upload\Templates;

class VideoTemplate extends AbstractTextFormatterTemplate
{
    /**
     * @var string
     */
    protected $tag = 'video';

    /**
     * {@inheritdoc}
     */
    public function name(): string
    {
        return 'Video';
    }

    /**
     * {@inheritdoc}
     */
    public function description(): string
    {
        return 'MP4 Video Template';
    }

    /**
     * {@inheritdoc}
     */
    public function template(): string
    {
        return $this->getView('fof-upload.templates::video');
    }

    /**
     * @return string
     */
    public function bbcode(): string
    {
        return '[upl-video uuid={IDENTIFIER} size={SIMPLETEXT2} url={URL}]{SIMPLETEXT1}[/upl-video]';
    }
}

3、修改 DownloadProvider.php

打开 /论坛根目录/vendor/fof/upload/src/Providers/DownloadProvider.php

在约26行 添加

use FoF\Upload\Templates\VideoTemplate;    //add
use FoF\Upload\Templates\AudioTemplate;    //add

image-1653327595774

在约48行 添加

$util->addRenderTemplate($this->container->make(VideoTemplate::class));               //add
$util->addRenderTemplate($this->container->make(AudioTemplate::class));              //add

image-1653328215988

4、刷新php缓存

在你的论坛后台->仪表盘->工具->清理缓存
image-1653328613294

5、设置MIME

在你的论坛后台->拓展程序->FoF Upload
Video MIME video\/(3gpp|mp4|mpeg|quicktime|webm)
Audio MIME audio\/(mp3|ogg|aiff|midi|mpeg)
image-1653328927653

完成

0

评论区