HTML 短视频播放器代码：电脑和手机兼容，支持滑动播放
<!DOCTYPE html>
<html>
<head>
<title>短视频播放器</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
/* 设置播放器容器的样式 */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
<pre><code> /* 设置播放器的样式 */
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</code></pre>
</head>
<body>
<!-- 播放器容器 -->
<div class='video-container'>
<!-- 播放器 -->
<video controls>
<!-- 添加视频资源 -->
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
</video>
</div>
<pre><code><!-- JavaScript代码，用于手机上的滑动播放 -->
<script>
var video = document.querySelector('video');
var startY;
// 监听touchstart事件
video.addEventListener('touchstart', function(e) {
startY = e.touches[0].pageY;
});
// 监听touchend事件
video.addEventListener('touchend', function(e) {
var endY = e.changedTouches[0].pageY;
// 如果向下滑动距离超过30像素，则暂停视频
if (endY - startY > 30) {
video.pause();
}
// 如果向上滑动距离超过30像素，则播放视频
if (startY - endY > 30) {
video.play();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oVab 著作权归作者所有。请勿转载和采集!