HTML5 视频弹幕播放器实现教程
<!DOCTYPE html>
<html>
<head>
<title>HTML5 视频弹幕播放器</title>
<meta name='description' content='学习如何使用 HTML、CSS 和 JavaScript 创建带弹幕功能的视频播放器。本教程提供详细代码示例和解释，助你快速上手。'>
<meta name='keywords' content='HTML5, 视频播放器, 弹幕, JavaScript, CSS, 前端开发'>
<style>
.video-container {
position: relative;
width: 640px;
height: 360px;
}
.video-player {
width: 100%;
height: 100%;
}
.danmu-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.danmu {
position: absolute;
font-size: 16px;
color: white;
pointer-events: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class='video-container'>
<video id='videoPlayer' class='video-player' controls>
<source src='video.mp4' type='video/mp4'>
您的浏览器不支持视频播放。
</video>
<div class='danmu-container'></div>
</div>
<pre><code><script>
const videoPlayer = document.getElementById('videoPlayer');
const danmuContainer = document.querySelector('.danmu-container');
// 监听视频播放时间更新事件
videoPlayer.addEventListener('timeupdate', function() {
const currentTime = videoPlayer.currentTime;
const danmus = getDanmusByTime(currentTime);
// 清空弹幕容器
danmuContainer.innerHTML = '';
// 在弹幕容器中创建和展示弹幕
danmus.forEach(function(danmu) {
const danmuElement = document.createElement('div');
danmuElement.classList.add('danmu');
danmuElement.innerText = danmu.text;
danmuElement.style.top = danmu.top + 'px';
danmuElement.style.color = danmu.color;
danmuContainer.appendChild(danmuElement);
// 计算弹幕移动的距离
const distance = danmuContainer.offsetWidth + danmuElement.offsetWidth;
// 设置弹幕动画
danmuElement.animate([
{ transform: 'translateX(100%)' },
{ transform: 'translateX(-' + distance + 'px)' }
], {
duration: 8000, // 弹幕移动的时间
easing: 'linear', // 弹幕匀速移动
delay: danmu.delay, // 弹幕出现的延迟时间
fill: 'forwards' // 弹幕动画结束后保持最后的位置
});
});
});
// 模拟从服务器获取某个时间点的弹幕数据
function getDanmusByTime(time) {
// 这里需要根据实际情况替换为从服务器获取弹幕数据的逻辑
const danmus = [
{ text: '弹幕1', top: 50, color: 'white', delay: 1000 },
{ text: '弹幕2', top: 100, color: 'red', delay: 2000 },
{ text: '弹幕3', top: 150, color: 'blue', delay: 3000 },
{ text: '弹幕4', top: 200, color: 'green', delay: 4000 }
];
return danmus.filter(function(danmu) {
return danmu.delay <= time * 1000; // 过滤出已经出现的弹幕
});
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/0FX 著作权归作者所有。请勿转载和采集!