可适用于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>