HTML5視頻彈幕是一種在視頻播放過程中，用戶可以發表評論或者互動內容的技術。HTML5視頻彈幕目前被廣泛應用于在線直播、在線視頻點播、網站課程等各種場景。
<!DOCTYPE html>
<html>
<head>
<title>HTML5視頻彈幕代碼示例</title>
<meta charset="UTF-8">
<style>
/* 錨點樣式 */
.danmu {
position: absolute;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
color: #FFFFFF;
text-shadow: 1px 1px 2px #000000;
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<div id="video-container">
<video id="my-video" width="800" height="450" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="danmu-container"></div>
<script>
var video = document.getElementById("my-video");
var danmuContainer = document.getElementById("danmu-container");
// 添加彈幕
function addDanmu() {
// 獲取當前播放時間
var time = video.currentTime;
// 隨機位置生成錨點
var left = Math.floor(Math.random() * video.clientWidth);
var top = Math.floor(Math.random() * video.clientHeight);
// 創建錨點元素
var danmu = document.createElement("span");
danmu.className = "danmu";
danmu.style.left = left + "px";
danmu.style.top = top + "px";
// 綁定點擊事件
danmu.addEventListener("click", function() {
alert("您點擊了一條彈幕，請注意查看！");
});
// 在錨點上添加文本
var text = "這是一條彈幕";
danmu.innerHTML = text;
// 將錨點添加至彈幕容器
danmuContainer.appendChild(danmu);
// 彈幕移動動畫
var speed = 200; // 速度200px/s
var duration = video.clientWidth / speed; // 動畫持續時間
var distance = video.clientWidth + danmu.clientWidth; // 彈幕移動總距離
danmu.style.transition = "left " + duration + "s linear";
danmu.style.left = "-" + distance + "px";
// 動畫執行完畢，從彈幕容器刪除
setTimeout(function() {
danmu.remove();
}, duration * 1000);
}
// 定時器添加彈幕
setInterval(addDanmu, 3000); // 每3秒添加一條彈幕
</script>
</body>
</html>HTML5視頻彈幕代碼使用了JavaScript創建彈幕錨點，通過定時器添加錨點元素，并添加移動動畫實現彈幕效果。此外，HTML5視頻彈幕還可以使用ajax技術向服務器請求彈幕數據，實現更加豐富的彈幕體驗。