|
马上注册，自学更多教程，下载更多资源。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
云码酷 discuz！网络播放器，基于先进的 discuz！代码功能精心打造，旨在为用户带来便捷、流畅的贴内视频播放体验。该播放器具备强大的兼容性，全面支持 M3U8、MP4、FLV 等当下主流的视频格式，无论是精彩的剧集还是各类视频资源，都能完美呈现。在选项卡信息展示方面，其设计独具匠心，可根据剧集数量或线路数量进行灵活设置，让用户能够清晰、直观地选择所需内容，轻松畅游于丰富多样的视频世界之中。
帖中界面展示：
使用设置：
标签:m3u8（可自定义命名）
替换内容:
[HTML] 纯文本查看 复制代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .player-container { max-width: 1200px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px; } .tabs { margin-bottom: 15px; } .tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; border-bottom: 2px solid #dee2e6; padding-bottom: 10px; } .tab-button { padding: 10px 20px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .tab-button:hover { background: #e9ecef; border-color: #ced4da; } .tab-button.active { background: #0d6efd; color: white; border-color: #0a58ca; } .episodes-container { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; } .episodes-title { font-size: 1.1em; color: #495057; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #dee2e6; } .episode-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .episode-button { padding: 8px 16px; background: white; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .episode-button:hover { background: #0d6efd; color: white; border-color: #0a58ca; transform: translateY(-1px); } .loading { display: none; text-align: center; padding: 20px; font-size: 16px; color: #6c757d; } .loading::after { content: '...'; animation: dots 1.5s steps(4, end) infinite; } .error-message { display: none; text-align: center; padding: 15px; color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; border-radius: 6px; margin-bottom: 15px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } 80%, 100% { content: ''; } } @media (max-width: 768px) { body { padding: 10px; } .player-container { padding: 15px; } .tab-button { padding: 8px 16px; font-size: 14px; } .episode-button { padding: 6px 12px; font-size: 14px; } } </style> <div class="player-container"> <div id="errorMessage" class="error-message"></div> <div id="loading" class="loading">Loading</div> <iframe id="videoPlayer" style="width: 100%; height: 450px; border: none; margin-bottom: 15px; border-radius: 8px; background-color: #000;" allowfullscreen></iframe> <div class="tabs"> <div id="tabButtons" class="tab-buttons"></div> <div id="episodesContainer" class="episodes-container"> <div id="episodeButtons" class="episode-buttons"></div> </div> </div> </div> <script> const CONFIG = { PLAYER_BASE_URL: 'https://www.ym.cool/tv/ck/dzPlayer1.php?txt=', ERROR_DISPLAY_DURATION: 3000, VIDEO_DATA: `{1}` }; const UIManager = { elements: { player: null, loading: null, error: null, tabButtons: null, episodeButtons: null }, init() { this.elements = { player: document.getElementById('videoPlayer'), loading: document.getElementById('loading'), error: document.getElementById('errorMessage'), tabButtons: document.getElementById('tabButtons'), episodeButtons: document.getElementById('episodeButtons') }; Object.values(this.elements).forEach(element => { if (!element) throw new Error('Required DOM elements not found'); }); }, showLoading(show) { this.elements.loading.style.display = show ? 'block' : 'none'; }, showError(message) { this.elements.error.textContent = message; this.elements.error.style.display = 'block'; setTimeout(() => { this.elements.error.style.display = 'none'; }, CONFIG.ERROR_DISPLAY_DURATION); } }; const VideoPlayer = { play(url, episodeNumber) { if (!url) throw new Error('Invalid video URL'); const formattedUrl = `第 ${episodeNumber} 集, ${url}`; UIManager.elements.player.src = CONFIG.PLAYER_BASE_URL + encodeURIComponent(formattedUrl); } }; const DataParser = { parse(data) { if (!data?.trim()) throw new Error('Invalid video data'); return data.split('<br />').filter(line => line.trim()).map(line => { const [name, ...urls] = line.split(','); return { name: name?.trim(), urls: urls.filter(url => url?.trim()) }; }); } }; const TabManager = { currentSeries: null, createTabs(videoData) { videoData.forEach((series, index) => { const button = document.createElement('button'); button.className = `tab-button${index === 0 ? ' active' : ''}`; button.textContent = series.name; button.onclick = () => this.switchTab(series, index); UIManager.elements.tabButtons.appendChild(button); }); if (videoData[0]) { this.showEpisodes(videoData[0]); } }, switchTab(series, index) { document.querySelectorAll('.tab-button').forEach((btn, i) => { btn.className = `tab-button${i === index ? ' active' : ''}`; }); this.showEpisodes(series); }, showEpisodes(series) { this.currentSeries = series; UIManager.elements.episodeButtons.innerHTML = ''; series.urls.forEach((url, index) => { const button = document.createElement('button'); button.className = 'episode-button'; button.textContent = `第 ${index + 1} 集`; button.onclick = () => this.playEpisode(url, index + 1); UIManager.elements.episodeButtons.appendChild(button); }); }, playEpisode(url, episodeNumber) { try { UIManager.showLoading(true); VideoPlayer.play(url, episodeNumber); } catch (error) { UIManager.showError(error.message); } finally { UIManager.showLoading(false); } } }; function initializePlayer() { try { UIManager.init(); const videoData = DataParser.parse(CONFIG.VIDEO_DATA); if (!videoData.length) { throw new Error('No video data available'); } TabManager.createTabs(videoData); if (videoData[0]?.urls[0]) { VideoPlayer.play(videoData[0].urls[0], 1); } } catch (error) { UIManager.showError(error.message); } } initializePlayer(); </script>
例子:[m3u8]123[m3u8]
解释:在线播放m3u8/MP4网络视频
参数个数:1
参数提示语:参数样式：剧集名称或线路名称,视频地址。每集一行，视频地址最好以视频格式为结尾
嵌套次数:1
允许使用此代码的用户组:（设置哪些用户组可以使用此代码，根据需求设置）
上一篇：Discuz! X3.2 到 X3.5 各版本的详细升级介绍 | 
分享
淘帖
支持
反对
发表于 2024-12-9 11:01:57
