WebPlayer

播放器亮点

📹

多格式支持

支持M3U8、MP4、FLV等多种视频格式，HTTP/HTTPS协议均可流畅播放。

🖼️

灵活分屏

支持1-6个窗口同时播放，方便对比不同视频源，提升工作效率。

🌓

护眼模式

一键切换白天/夜晚模式，适应不同使用环境，保护您的视力健康。

🕒

历史播放记录

本地自动保存播放历史，支持快速查看、复制和删除。

播放历史

常见问题

FLV格式视频地址在网页上可以播放吗？ +

是的，本播放器支持FLV格式的视频地址。您只需将FLV链接粘贴到输入框中，点击播放按钮即可。

为什么HTTPS网页无法播放HTTP的m3u8/flv格式的直播源？ +

由于浏览器的安全策略，HTTPS网页无法加载HTTP资源。建议将直播源升级为HTTPS，或使用HTTP网页播放。

为什么网页端无法播放RTMP格式的视频？ +

RTMP协议需要Flash支持，而现代浏览器已不再支持Flash。建议将RTMP流转换为HLS或DASH格式进行播放。

网页端支持哪些格式视频的播放？ +

本播放器支持M3U8、MP4、FLV等多种视频格式，HTTP/HTTPS协议均可流畅播放。

m3u8格式的视频地址可以在哪些终端播放？ +

M3U8格式的视频地址可以在支持HLS协议的终端播放，包括iOS、Android、macOS、Windows等平台。

前端代码示例


<!-- 引入HLS.js和FLV.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

<!-- 播放器HTML结构 -->
<div class="video-container">
    <div class="video-wrapper">
        <video id="video1" controls></video>
        <div class="resolution"></div>
        <div class="video-control">
            <input type="text" id="videoUrl1" placeholder="输入视频链接">
            <button class="play-button" onclick="loadSingleVideo(1)">播放</button>
        </div>
    </div>
</div>

<!-- 播放器JavaScript逻辑 -->
<script>
    function loadSingleVideo(index) {
        const input = document.getElementById(`videoUrl${index}`);
        const url = input.value.trim();
        const videoElement = document.getElementById(`video${index}`);
        const format = detectVideoFormat(url);

        if (format === 'm3u8') {
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(url);
                hls.attachMedia(videoElement);
            } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
                videoElement.src = url;
            }
        } else if (format === 'flv') {
            if (flvjs.isSupported()) {
                const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
            }
        } else {
            videoElement.src = url;
        }

        videoElement.play();
    }

    function detectVideoFormat(url) {
        if (url.match(/\.m3u8($|\/)/i)) return 'm3u8';
        if (url.match(/\.flv($|\/)/i)) return 'flv';
        return 'mp4';
    }
</script>

播放历史