播放器代码 1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.css"/>
<div id="dplayer" style="width: 100%; height: 500px; margin: 30px auto;"></div>
<div style="text-align: center;">
<input type="text" id="video-url" style="width: 50%; margin: 10px 0; padding: 10px; border-radius: 10px; border: 1px solid #ccc;">
<button id="play-btn" style="width: 20%; padding: 10px; border-radius: 10px; border: 1px solid #ccc; background-color: #ccc;">播放</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: '',
type: 'auto'
}
});
const videoUrlInput = document.getElementById('video-url');
const playBtn = document.getElementById('play-btn');
playBtn.addEventListener('click', () => {
dp.switchVideo({
url: videoUrlInput.value,
type: 'auto'
});
});
</script>播放器代码 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DPlayer Online Video Player</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css"/>
<style>
#dplayer {
width: 100%;
height: 500px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
#video-url {
width: 50%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
margin-right: 10px;
}
#play-btn {
padding: 10px 20px;
background-color: blue;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="dplayer"></div>
<div class="controls">
<input type="text" id="video-url">
<button id="play-btn">播放</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: '',
type: 'auto'
}
});
const videoUrlInput = document.getElementById('video-url');
const playBtn = document.getElementById('play-btn');
playBtn.addEventListener('click', () => {
dp.switchVideo({
url: videoUrlInput.value,
type: 'auto'
});
});
</script>
</body>
</html>相关链接
在线视频播放器：https://www.hlsplayer.net/
