• 懒鸟飞:帝国cms模板专业分享平台,新域名:lanniaofei.com

用js点击多个按钮把播放地址传给DPlayer播放器

在JavaScript中,你可以监听按钮点击事件,并在事件处理函数中设置DPlayer播放器的播放地址。以下是一个简单的示例代码:

HTML部分:

<!-- DPlayer容器 -->
<div id="dplayer"></div>
 
<!-- 按钮,每个按钮的"data-url"属性用于存储播放地址 -->
<button class="play-button" data-url="http://example.com/video1.mp4">播放视频1</button>
<button class="play-button" data-url="http://example.com/video2.mp4">播放视频2</button>

JavaScript部分:
// 引入DPlayer
import DPlayer from 'dplayer';
 
// 创建DPlayer实例
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'http://example.com/video1.mp4' // 初始播放地址
    }
});
 
// 监听按钮点击事件
document.querySelectorAll('.play-button').forEach(button => {
    button.addEventListener('click', () => {
        // 获取按钮的播放地址
        const url = button.getAttribute('data-url');
        // 设置播放地址并播放
        dp.switchVideo({ url });
    });
});
 
QQ在线咨询
QQ客服
淘宝官网