Flarum插入视频的方法

admin

修改文件

编辑根目录下的extend.php文件:
在

return [
    // Register extenders here to customize your forum!
  
];

中插入


    (new Extend\Formatter())
    ->configure(function ($configurator) {
        // 启用HTMLElements插件
        $configurator->HTMLElements;
        
        // 允许video标签
        $configurator->HTMLElements->allowElement('video');
        
        // 允许video标签的必要属性
        $configurator->HTMLElements->allowAttribute('video', 'src');
        $configurator->HTMLElements->allowAttribute('video', 'controls');
        $configurator->HTMLElements->allowAttribute('video', 'width');
        $configurator->HTMLElements->allowAttribute('video', 'height');
        $configurator->HTMLElements->allowAttribute('video', 'autoplay');
        $configurator->HTMLElements->allowAttribute('video', 'loop');
        $configurator->HTMLElements->allowAttribute('video', 'muted');
        $configurator->HTMLElements->allowAttribute('video', 'poster');
        $configurator->HTMLElements->allowAttribute('video', 'preload');
        $configurator->HTMLElements->allowAttribute('video', 'playsinline');
        $configurator->HTMLElements->allowAttribute('video', 'type');
        
        // 允许audio标签
        $configurator->HTMLElements->allowElement('audio');
        
        // 允许audio标签的必要属性
        $configurator->HTMLElements->allowAttribute('audio', 'src');
        $configurator->HTMLElements->allowAttribute('audio', 'controls');
        $configurator->HTMLElements->allowAttribute('audio', 'autoplay');
        $configurator->HTMLElements->allowAttribute('audio', 'loop');
        $configurator->HTMLElements->allowAttribute('audio', 'muted');
        $configurator->HTMLElements->allowAttribute('audio', 'preload');
        $configurator->HTMLElements->allowAttribute('audio', 'type');
        $configurator->HTMLElements->allowAttribute('audio', 'controlsList');
        
        // 二进制视频短代码：[video]URL[/video]
        $configurator->BBCodes->addCustom(
            '[video]{URL}[/video]',
            '<div class="video-shortcode-container" style="width:100%; max-width:800px; margin:0 auto; position:relative; padding-top:56.25%; overflow:hidden;">
                <video 
                    src="{URL}" 
                    style="position:absolute; top:0; left:0; width:100%; height:100%;"
                    controls 
                    preload="metadata"
                    class="native-video-player"
                ></video>
            </div>'
        );

        // 音频短代码：[audio]URL[/audio]
        $configurator->BBCodes->addCustom(
            '[audio]{URL}[/audio]',
            '<div class="audio-shortcode-container" style="width:100%; max-width:600px; margin:0 auto;">
                <audio 
                    src="{URL}" 
                    controls 
                    preload="metadata"
                    class="native-audio-player"
                    style="width:100%;"
                ></audio>
            </div>'
        );

        // HLS流短代码：[hls]URL[/hls]
        $configurator->BBCodes->addCustom(
            '[hls]{URL}[/hls]',
            '<div class="video-shortcode-container" style="width:100%; max-width:800px; margin:0 auto; position:relative; padding-top:56.25%; overflow:hidden;">
                <video 
                    data-hls-src="{URL}"
                    style="position:absolute; top:0; left:0; width:100%; height:100%;"
                    controls 
                    preload="metadata"
                    class="native-video-player hls-video"
                ></video>
                <script>
                    // 立即执行函数，确保DOM加载完成后执行
                    (function() {
                        function initHls() {
                            var videos = document.querySelectorAll(".hls-video");
                            videos.forEach(function(video) {
                                var src = video.getAttribute("data-hls-src");
                                if (!src) return;
                                
                                // 检查浏览器是否原生支持HLS
                                var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
                                if (isSafari || video.canPlayType("application/vnd.apple.mpegurl").replace(/no/, "")) {
                                    // Safari或其他原生支持HLS的浏览器
                                    console.log("Using native HLS support");
                                    video.src = src;
                                } else if (window.Hls) {
                                    // 已加载hls.js库
                                    console.log("Using hls.js for HLS playback");
                                    try {
                                        var hls = new Hls();
                                        hls.loadSource(src);
                                        hls.attachMedia(video);
                                        hls.on(Hls.Events.MANIFEST_PARSED, function() {
                                            console.log("HLS manifest parsed, ready to play");
                                            // 可选：自动播放
                                            // video.play();
                                        });
                                        hls.on(Hls.Events.ERROR, function(event, data) {
                                            console.error("HLS Error:", data);
                                            if (data.fatal) {
                                                switch(data.type) {
                                                    case Hls.ErrorTypes.NETWORK_ERROR:
                                                        console.error("Network error, trying to recover...");
                                                        hls.startLoad();
                                                        break;
                                                    case Hls.ErrorTypes.MEDIA_ERROR:
                                                        console.error("Media error, trying to recover...");
                                                        hls.recoverMediaError();
                                                        break;
                                                    default:
                                                        console.error("Fatal error, cannot recover");
                                                        hls.destroy();
                                                        break;
                                                }
                                            }
                                        });
                                    } catch (e) {
                                        console.error("Error initializing hls.js:", e);
                                    }
                                } else {
                                    // 未加载hls.js库，动态加载
                                    console.log("Loading hls.js library");
                                    var script = document.createElement("script");
                                    // 使用可靠的CDN链接
                                    script.src = "https://registry.npmmirror.com/hls.js/1.6.12/files/dist/hls.min.js";
                                    script.type = "text/javascript";
                                    script.onload = function() {
                                        console.log("hls.js loaded successfully");
                                        initHls(); // 递归调用，确保hls.js已加载
                                    };
                                    script.onerror = function() {
                                        console.error("Failed to load hls.js from CDN");
                                        // 尝试使用备用CDN
                                        script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
                                        document.head.appendChild(script);
                                    };
                                    document.head.appendChild(script);
                                }
                            });
                        }
                        
                        // 当DOM加载完成后执行
                        if (document.readyState === "loading") {
                            document.addEventListener("DOMContentLoaded", initHls);
                        } else {
                            initHls();
                        }
                    })();
                </script>
            </div>'
        );
    }),

使用方法

[video]https://yourdomain.com/test.mp4[/video]
或
[hls]https://yourdomain.com/test.m3u8[/hls]