在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 });
});
});