可適用於DISCUZ論壇的音頻、視頻播放器代碼及圖片嵌入代碼

可適用於DISCUZ論壇的音頻

視頻播放器代碼及圖片嵌入代碼

2025年12月16日

1.視頻單個播放器代碼(無邊框）

<section style="padding:20px 2%; text-align:center;box-sizing:border-box;">

<video poster="https://lz.qaiu.top/parser?url=https://share.feijipan.com/s/gcO6g1ph" controls="" loop="" playsinline="" preload="none" style="background:#000; width:800px; max-width:100%; aspect-ratio:16/9;box-sizing:border-box;">

<source src="https://dachengpuguang.s3.ap-northeast-1.amazonaws.com/1755053714021-BHFF_Video_teaching_EP7__x264.mp4

" type="video/mp4"/>

<p>

您的瀏覽器不支持HTML5視頻，請下載視頻

</p>

</video>

</section>

2.視頻單個播放器代碼(粉底金邊）

<div style="border:solid #f3b83e;border-width:7px 0 7px 0;background-color:#fcefdc"><div style="padding:20px 2% 20px 2%;text-align:center"><video src="https://dachengpuguang.s3.ap-northeast-1.amazonaws.com/1755053714021-BHFF_Video_teaching_EP7__x264.mp4" poster="https://lz.qaiu.top/parser?url=https://share.feijipan.com/s/gcO6g1ph

" loop="loop" preload="none" controls="controls" webkit-playsinline="" playsinline="" style="background-color:black;width:800px;max-width:100%;"></video></div></div>

3.視頻單個播放器代碼(橙底金邊）

<div style="border:solid #f3b83e; border-width:7px 0; background-color:#ebe68a">

  <div style="padding:20px 2%; text-align:center">

    

    

    <video

      poster="https://lz.qaiu.top/parser?url=https://share.feijipan.com/s/gcO6g1ph"

      controls

      loop

      playsinline

      preload="none"

      style="background:#000; width:800px; max-width:100%; aspect-ratio:16/9;"

    >

      <source src="https://dachengpuguang.s3.ap-northeast-1.amazonaws.com/1755053714021-BHFF_Video_teaching_EP7__x264.mp4

" type="video/mp4">

      

      

      <p>您的瀏覽器不支持HTML5視頻，請下載視頻</p >

    </video>

    

  </div>

</div>

4.音頻列表播放器代碼（多個連播）

<div>

    <h3>標題</h3>

    <ul>

<li data-src="audio1.mp3">音頻1</li>

        <li data-src="audio2.mp3">音頻2</li>

        <li data-src="audio3.mp3">音頻3</li>

    </ul>

    <div>

        <audio id="audio-player" controls>

            <source src="" type="audio/mpeg">

            您的瀏覽器不支持音頻播放。

        </audio>

    </div>

</div>

 

<style>

.audio-player-container {

    max-width: 600px;

    margin: 20px auto;

    padding: 20px;

    background:#ffc000;

    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    font-family: Arial, sans-serif;

}

 

.audio-player-container h3 {

    text-align: center;

    color:#333;

    margin-bottom: 20px;

}

 

.audio-playlist {

    list-style: none;

    padding: 0;

    margin: 0;

}

 

.audio-playlist li {

    padding: 10px;

    margin: 5px 0;

    background:#fff;

    border-radius: 5px;

    cursor: pointer;

    transition: background 0.3s ease;

    color: #632423;

    text-decoration: none;

    border: 1px solid#ffff00;

}

 

.audio-playlist li:hover {

    background:#f1f1f1;

    color:#0056b3;}

 

.audio-playlist li.playing {

    background:#fdeada;

    color:#fff;

}

 

.audio-controls {

    margin-top: 20px;

}

 

audio {

    width: 100%;

    outline: none;

}

</style>

 

<script>

document.addEventListener('DOMContentLoaded', function() {

    const playlist = document.querySelector('.audio-playlist');

    const audioPlayer = document.getElementById('audio-player');

    const audioItems = document.querySelectorAll('.audio-playlist li');

 

    let currentIndex = 0;

 

    // 加載並播放音頻

    function loadAudio(index) {

        const audioSrc = audioItems[index].getAttribute('data-src');

        audioPlayer.src = audioSrc;

        audioPlayer.play();

        updateHighlight(index);

    }

 

    // 更新當前播放高亮

    function updateHighlight(index) {

        audioItems.forEach((item, i) => {

            if (i === index) {

                item.classList.add('playing');

            } else {

                item.classList.remove('playing');

            }

        });

    }

 

    // 點擊列表項播放

    playlist.addEventListener('click', function(event) {

        if (event.target.tagName === 'LI') {

            currentIndex = Array.from(audioItems).indexOf(event.target);

            loadAudio(currentIndex);

        }

    });

 

    // 自動播放下一首

    audioPlayer.addEventListener('ended', function() {

        currentIndex = (currentIndex + 1) % audioItems.length;

        loadAudio(currentIndex);

    });

 

    // 初始化播放第一首

    loadAudio(0);

});

</script> 

5.視頻列表播放器代碼（多個連播）

<div style="max-width:100%;margin:0 auto;">

<h3 style="text-align:center;">《白話佛法》視頻開示116集</h3>

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">

<video id="videoPlayer"controls autoplay style="position:absolute;top:0;left:0;width:100%;height:100%;">

<source src="video1.mp4"type="video/mp4">

您的瀏覽器不支持視頻標籤。

</video>

</div>

<ul id="videoList"style="list-style-type:none;padding:0;margin:10px 0;">

<li data-src="audio1.mp3">視頻1</li>

        <li data-src="audio2.mp3">視頻2</li>

        <li data-src="audio3.mp3">視頻3</li>

</ul>

</div>

 

<script type="text/javascript">

//獲取視頻元素和視頻列表

const videoPlayer=document.getElementById('videoPlayer');

const videoList=document.getElementById('videoList').getElementsByTagName('li');

 

//當前播放的視頻索引

let currentVideoIndex=0;

 

//當視頻結束時，播放下一個視頻

videoPlayer.addEventListener('ended',function(){

currentVideoIndex++;

if(currentVideoIndex<videoList.length){

videoPlayer.src=videoList[currentVideoIndex].getAttribute('data-src');

videoPlayer.play();

}else{

alert('所有視頻播放完畢！');

}

});

 

//點擊視頻列表中的項切換視頻

Array.from(videoList).forEach((item,index)=>{

item.addEventListener('click',function(){

currentVideoIndex=index;

videoPlayer.src=this.getAttribute('data-src');

videoPlayer.play();

});

});

</script>

6.圖片嵌入代碼（支持JPG、PNG等）

[img]https://[/img]

示例：  

[img]https://example.com/your-image.jpg[/img]

7.網頁貼圖代碼(HTML)

示例： 

<a href="https://imgchr.com/i/pZtUImt"><img src="https://s41.ax1x.com/2025/12/30/pZtUImt.jpg" alt="pZtUImt.jpg" border="0" /></a>