<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- 引入 Video.js CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.3/video-js.min.css" rel="stylesheet">
<!-- 引入 Video.js 播放器和 HLS 插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.3/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<style>
/* 黑屏遮挡层样式 */
#ad-blocker {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
color: white;
font-size: 24px;
text-align: center;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
/* 确保视频适应不同屏幕尺寸 */
video {
width: 100% !important;
height: auto !important;
object-fit: contain; /* 或使用 cover，根据需要调整 */
}
/* 为小屏设备（手机、平板）做适配 */
@media (max-width: 768px) {
video {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<!-- 黑屏提示，展示广告或其他内容 -->
<div id="ad-blocker">填写黑屏提示字幕</div> <!-- 黑屏提示 -->
<!-- Video.js 播放器 -->
<video id="hls-video" class="video-js vjs-default-skin" controls autoplay width="640" height="360"></video>
<script>
// 初始化 Video.js 播放器
var player = videojs('hls-video', {
controls: true,
autoplay: true,
preload: 'auto',
fluid: true // 自动调整大小以适应容器
});
// 设置视频源为 HLS 流
player.src({
src: '填写你的视频.m3u8 的链接 ', // 你的视频源 URL
type: 'application/x-mpegURL'
});
// 当元数据加载完成时，跳过前25秒广告，并隐藏广告遮挡层
player.on('loadedmetadata', function() {
player.currentTime(25); // 跳过前25秒广告
document.getElementById('ad-blocker').style.display = 'none'; // 隐藏黑屏遮挡层
});
// 监听全屏变化，确保全屏时视频适应全屏
player.on('fullscreenchange', function() {
if (player.isFullscreen()) {
// 确保视频在全屏模式下填充整个屏幕
player.width(window.innerWidth); // 全屏时宽度是设备屏幕宽度
player.height(window.innerHeight); // 全屏时高度是设备屏幕高度
} else {
player.width('640'); // 恢复默认尺寸
player.height('360');
}
});
// 强制视频横屏显示（对于移动设备）
if (window.innerWidth < window.innerHeight) {
// 如果是竖屏设备，提示用户横屏观看
alert("请将设备旋转为横屏以获得更好的观看体验！");
}
// 在移动设备上自动调整为横屏模式，若设备竖屏
window.addEventListener("orientationchange", function() {
if (window.orientation == 90 || window.orientation == -90) {
// 横屏模式
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
}
});
</script>
</body>
</html>
