Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@beiningmhy
beiningmhy authored Aug 1, 2024
1 parent c0134ec commit f05d96f
Show file tree
Hide file tree
Showing 8 changed files with 341 additions and 0 deletions.
145 changes: 145 additions & 0 deletions a/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>随机视频</title>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

.preview-container {
/* position: relative; */
width: 100%;
height: 0;
padding-bottom: 56.25%;
/* 这个值是根据视频宽高比调整的，例如：如果视频是16:9，则为(9÷16)×100% */
overflow: hidden;
}

.preview-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* 或者使用 object-fit: fill/cover 等以适应不同布局需求 */
}

@media screen and (max-width: 768px) {

/* 自定义这个断点以适应你的设计需求 */
.preview-container {
height: 100%;
width: 100%;
padding-bottom: 0;
}

.preview-container video {
height: auto;
width: 100%;
}
}
</style>
</head>

<body>
<div class="preview-container">
<!-- 根据URL参数加载并播放视频 -->
<video id="previewVideo" src="" autoplay muted playsinline></video>
</div>

<script>
const l = 551;


function playRandomVideo() {
// let randomIndex = Math.floor(Math.random() * videoData.length);
// let videoUrl = videoData[randomIndex].videoUrl;

let randomIndex = Math.floor(Math.random() * l)+1;
// document.write("<span>l</span>")
let videoUrl = '小王很哇塞的抖音 - 抖音(' + randomIndex + ').mp4';

let videoElement = document.getElementById('previewVideo');
videoElement.src = '../xw/' + videoUrl;
videoElement.onended = playRandomVideo;
}

window.onload = function () {
playRandomVideo();
};


document.addEventListener('keydown', function (event) {
// 检查是否按下了空格键
if (event.key === ' ') {
// 在这里写你的处理函数或要执行的代码
playRandomVideo();
}
});



let observerOptions = { threshold: 0.5 };
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let videoElement = entry.target;
// videoElement.muted = false; // 如果还没有设置
videoElement.play().catch((error) => console.error('播放失败:', error));
}
});
}, { threshold: 0.5 });

// 观察视频元素
let videoElement1 = document.querySelector('video');
observer.observe(videoElement1);





let videoElement = document.getElementById('previewVideo');
let f = true;

// 检测触摸事件以模拟用户交互
document.addEventListener('click', function handleTouchStart() {

if (f) {
videoElement.play().then(function () {
// 播放成功，现在可以解除静音
videoElement.muted = false;
}).catch(function (error) {
console.error('无法播放视频：', error);
});
// 移除监听器以避免重复触发
document.removeEventListener('touchstart', handleTouchStart, false);


// 如果支持自动播放且是静音状态，则尝试播放视频
if (videoElement.muted && videoElement.paused) {
videoElement.play().catch(function (error) {
console.error('无法自动播放视频：', error);
});
}
f = false;

} else {
videoElement.muted = true;
f = true;
}
}
, false);
</script>
</body>

</html>
82 changes: 82 additions & 0 deletions b/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>视频选择页面</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

.button-container {
display: flex;
flex-direction: column;
gap: 10px;
/* 按钮之间的间隔 */
}

.fancy-button {
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
color: white;
background-image: linear-gradient(to right, #007BFF, #6a00ff);
border: none;
border-radius: 30px;
/* 圆润的边角 */
cursor: pointer;
transition: all 0.3s ease;
/* 平滑的过渡效果 */
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
/* 阴影效果 */
outline: none;
/* 点击时不显示轮廓 */
}

.fancy-button:hover {
/* 鼠标悬浮时渐变颜色 */
background-image: linear-gradient(to right, #0056b3, #6a00ff);
transform: translateY(-2px);
/* 轻微上移，增加悬浮感 */
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
/* 阴影加深 */
}
</style>
</head>

<body>
<div class="button-container">
<!-- 视频按钮列表 -->
<button class="fancy-button" data-video-url="xw2横屏字幕">xw2横屏字幕</button>
<button class="fancy-button" data-video-url="xw2竖屏字幕">xw2竖屏字幕</button>
<button class="fancy-button" data-video-url="url:../a">随机</button>
</div>

<script>
// JavaScript代码，实现按钮点击跳转功能
document.querySelectorAll('.fancy-button').forEach(button => {
button.addEventListener('click', function () {
let videoUrl = this.getAttribute('data-video-url');

if (videoUrl.startsWith('url:')) {
videoUrl = videoUrl.slice(4);
window.location.href = encodeURIComponent(videoUrl);
} else {
// 使用encodeURIComponent编码videoUrl，然后设置window.location.href
window.location.href = 'video_page.html?videoUrl=../video/' + encodeURIComponent(videoUrl)+'.mp4';
}


});
});
</script>
</body>

</html>
114 changes: 114 additions & 0 deletions b/video_page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>视频播放页面</title>
<meta charset="UTF-8">
<!-- 其他样式保持不变 -->
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

.preview-container {
/* position: relative; */
width: 100%;
height: 0;
padding-bottom: 56.25%;
/* 这个值是根据视频宽高比调整的，例如：如果视频是16:9，则为(9÷16)×100% */
overflow: hidden;
}

.preview-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* 或者使用 object-fit: fill/cover 等以适应不同布局需求 */
}

@media screen and (max-width: 768px) {

/* 自定义这个断点以适应你的设计需求 */
.preview-container {
height: 100%;
width: 100%;
padding-bottom: 0;
}

.preview-container video {
height: auto;
width: 100%;
}
}
</style>
</head>

<body>
<div class="preview-container">
<!-- 视频元素，初始src为空 -->
<video id="previewVideo" muted playsinline ondblclick="togglePlayPause()"></video> <!-- 移除了autoplay属性 -->
</div>

<script>
var video = document.getElementById('previewVideo');
var isMuted = true; // 初始状态为静音

// 当页面加载完成时执行
window.onload = function() {
// 获取URL中的查询参数
var urlParams = new URLSearchParams(window.location.search);
var videoUrl = urlParams.get('videoUrl');
// 如果有视频URL，设置到video元素的src属性
if (videoUrl) {
video.src = decodeURIComponent(videoUrl);
// 监听视频的loadedmetadata事件，确保视频元数据加载完成后再播放
video.addEventListener('loadedmetadata', function() {
video.play(); // 手动调用播放
});
}
};

// 监听空格键按下事件
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
toggleMute();
}
});

// 监听点击事件
document.addEventListener('click', function() {
toggleMute();
});

// 双击视频元素切换播放/暂停
function togglePlayPause() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}

// 切换静音/恢复音量
function toggleMute() {
isMuted = video.muted;
video.muted = !isMuted; // 切换当前的muted状态
}

// 监听视频的ended事件，实现循环播放
video.addEventListener('ended', function() {
video.play(); // 重新开始播放
});
</script>
</body>

</html>
Binary file added xw/小王很哇塞的抖音 - 抖音(1).mp4
View file
Binary file not shown.
Binary file added xw/小王很哇塞的抖音 - 抖音(2).mp4
View file
Binary file not shown.
Binary file added xw/小王很哇塞的抖音 - 抖音(3).mp4
View file
Binary file not shown.
Binary file added xw/小王很哇塞的抖音 - 抖音(4).mp4
View file
Binary file not shown.
Binary file added xw/小王很哇塞的抖音 - 抖音(5).mp4
View file
Binary file not shown.

0 comments on commit f05d96f

Please sign in to comment.