基于HTML、CSS和JavaScript构建触摸滑动视频播放器教程-html教程-PHP中文网

基于HTML、CSS和JavaScript构建触摸滑动视频播放器教程

本教程详细指导如何将现有的图片触摸滑动组件改造为支持视频内容的滑动播放器。通过调整HTML结构、适配CSS样式和优化JavaScript事件处理，特别是阻止视频元素的默认拖拽行为，确保滑动功能流畅运行，解决滑动器可能出现的“冻结”问题，实现响应式、交互友好的视频展示。

引言：从图片到视频的滑动体验

在现代web应用中，触摸滑动组件因其直观的用户体验而广受欢迎。最初，这类组件多用于展示图片画廊。然而，随着富媒体内容的兴起，将图片滑动器升级为视频滑动器成为一个常见的需求。将静态图片替换为动态视频并非简单的标签替换，视频元素自带的交互行为（如拖拽、播放控制）可能会与滑动组件的自定义javascript逻辑产生冲突，导致滑动功能“冻结”或失效。本教程将深入探讨如何解决这些挑战，实现一个功能完善的触摸滑动视频播放器。

HTML结构重构：引入视频元素

将图片滑动器改造为视频滑动器，最核心的步骤是替换HTML中的基于HTML、CSS和JavaScript构建触摸滑动视频播放器教程标签为

替换标签： 将每个
内部的标签替换为
视频源： 使用标签指定视频文件的URL。为了更好的兼容性，可以提供多种格式的视频源。
控制条： 添加 controls 属性，为用户提供播放、暂停、音量等基本控制。
尺寸： 可以通过 width 和 height 属性设置视频的初始尺寸，但通常更推荐通过CSS进行响应式控制。

以下是改造后的HTML结构示例：


    
        Airpods
        $199
        
        Buy Now
    
    
        iPhone 12
        $799
        
        Buy Now
    
    
        iPad
        $599
        
        Buy Now

CSS样式适配：确保视频显示正常

将基于HTML、CSS和JavaScript构建触摸滑动视频播放器教程替换为

视频尺寸与布局： 确保视频能够在其父容器 (.slide) 内正确缩放，并保持居中。
替换选择器： 将 .slide img 相关的样式选择器更改为 .slide video。

以下是适配后的CSS样式：

立即学习“Java免费学习笔记（深入）”；

知了zKnown

知了zKnown：致力于信息降噪 / 阅读提效的个人知识助手。

下载

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #333;
  color: #fff;
  line-height: 1.7;
}

.slider-container {
  height: 100vh;
  display: inline-flex;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
  cursor: grab;
}

.slide {
  max-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  user-select: none;
}

/* 将此处 img 选择器改为 video */
.slide video {
  max-width: 100%;
  max-height: 60%;
  transition: transform 0.3s ease-in-out;
}

.slide h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.slide h4 {
  font-size: 1.3rem;
}

.btn {
  background-color: #444;
  color: #fff;
  text-decoration: none;
  padding: 1rem 1.5rem;
}

.grabbing {
  cursor: grabbing;
}

.grabbing .slide video { /* 同样将此处 img 选择器改为 video */
  transform: scale(0.9);
}

JavaScript逻辑优化：解决滑动“冻结”问题

JavaScript是实现滑动逻辑的核心。将图片替换为视频后，最常遇到的问题是滑动器在第一次操作后“冻结”。这通常是因为视频元素具有其自身的默认拖拽行为，与自定义的触摸或鼠标拖拽事件冲突。解决此问题的关键在于阻止视频元素的默认 dragstart 事件。

选择视频元素： 确保JavaScript正确地选择了每个 slide 中的
阻止默认拖拽： 为每个视频元素添加 dragstart 事件监听器，并调用 e.preventDefault()。这会阻止浏览器处理视频元素的默认拖拽行为，从而允许自定义的滑动逻辑正常工作。

以下是完整的JavaScript代码，其中已包含了对视频元素 dragstart 事件的处理：

/*
  This JS code is from the following project:
  https://github.com/bushblade/Full-Screen-Touch-Slider
*/

const slider = document.querySelector('.slider-container'),
  slides = Array.from(document.querySelectorAll('.slide'))

let isDragging = false,
  startPos = 0,
  currentTranslate = 0,
  prevTranslate = 0,
  animationID = 0,
  currentIndex = 0

slides.forEach((slide, index) => {
  // 确保这里选择的是 video 元素
  const slideImage = slide.querySelector('video')
  // 阻止视频元素的默认 dragstart 行为，这是解决“冻结”问题的关键
  slideImage.addEventListener('dragstart', (e) => e.preventDefault())

  // Touch events
  slide.addEventListener('touchstart', touchStart(index))
  slide.addEventListener('touchend', touchEnd)
  slide.addEventListener('touchmove', touchMove)

  // Mouse events
  slide.addEventListener('mousedown', touchStart(index))
  slide.addEventListener('mouseup', touchEnd)
  slide.addEventListener('mouseleave', touchEnd)
  slide.addEventListener('mousemove', touchMove)
})

// Disable context menu
window.oncontextmenu = function (event) {
  event.preventDefault()
  event.stopPropagation()
  return false
}

function touchStart(index) {
  return function (event) {
    currentIndex = index
    startPos = getPositionX(event)
    isDragging = true

    // https://css-tricks.com/using-requestanimationframe/
    animationID = requestAnimationFrame(animation)
    slider.classList.add('grabbing')
  }
}

function touchEnd() {
  isDragging = false
  cancelAnimationFrame(animationID)

  const movedBy = currentTranslate - prevTranslate

  // 根据移动距离判断是否切换到上一个或下一个幻灯片
  if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1
  if (movedBy > 100 && currentIndex > 0) currentIndex -= 1

  setPositionByIndex()

  slider.classList.remove('grabbing')
}

function touchMove(event) {
  if (isDragging) {
    const currentPosition = getPositionX(event)
    currentTranslate = prevTranslate + currentPosition - startPos
  }
}

function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX
}

function animation() {
  setSliderPosition()
  if (isDragging) requestAnimationFrame(animation)
}

function setSliderPosition() {
  slider.style.transform = `translateX(${currentTranslate}px)`
}

function setPositionByIndex() {
  currentTranslate = currentIndex * -window.innerWidth
  prevTranslate = currentTranslate
  setSliderPosition()
}

完整示例：整合代码

为了方便读者实践，以下提供一个包含上述HTML、CSS和JavaScript的完整页面结构。您可以将其保存为 .html 文件并在浏览器中打开。




    
    
    触摸滑动视频播放器
    


    
        
            Airpods
            $199
            
            Buy Now
        
        
            iPhone 12
            $799
            

					
													
								
									 
										作者最新文章
									
								
																	
										
											
												国产GPU重磅发布 明年超英伟达Rubin架构：中国院士力挺天数智芯
											
											
												2026-01-27 15:06
											
										
								
																	
										
											
												如何在 MySQL 中自定义唯一键冲突的错误提示（如重复手机号）
											
											
												2026-01-27 15:06
											
										
								
																	
										
											
												如何在 Pandas 中扁平化嵌套 JSON 列表时保留原始时间戳列
											
											
												2026-01-27 15:09
											
										
								
																	
										
											
												如何在 CGO 中安全地将 C 端结构体数组传递到 Go 并正确使用
											
											
												2026-01-27 15:11
											
										
								
																	
										
											
												如何用 Flex 或 Grid 将单列链接列表均匀拆分为双列（共用同一标题）
											
											
												2026-01-27 15:11
											
										
								
																	
										
											
												如何使用chatgpt教程
											
											
												2026-01-27 15:21
											
										
								
																	
										
											
												Spring Batch 多文件并行处理：基于单文件单 Job 的最佳实践
											
											
												2026-01-27 15:21
											
										
								
																	
										
											
												存储价格持续上涨：部分机型首销优惠价没了
											
											
												2026-01-27 15:38
											
										
								
																	
										
											
												如何在 Android 中正确设置 Button 的背景色与文字颜色
											
											
												2026-01-27 15:44
											
										
								
																	
										
											
												如何在 Python 中动态获取父类名称而非当前实例的类名
											
											
												2026-01-27 15:56
											
										
								
															
						
						
							
								 
									热门AI工具
								
								更多
							

							
																	
										
											
												
											
											
												DeepSeek
												幻方量化公司旗下的开源大模型平台
																									
														AI 编程开发AI 聊天问答													
																							
										
									
																	
										
											
												
											
											
												豆包大模型
												字节跳动自主研发的一系列大型语言模型
																									
														AI 编程开发AI大模型													
																							
										
									
																	
										
											
												
											
											
												通义千问
												阿里巴巴推出的全能AI助手
																									
														AI 编程开发Agent智能体													
																							
										
									
																	
										
											
												
											
											
												腾讯元宝
												腾讯混元平台推出的AI助手
																									
														文档处理AI 聊天问答													
																							
										
									
																	
										
											
												
											
											
												文心一言
												文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。
																									
														AI 编程开发AI 文本写作													
																							
										
									
																	
										
											
												
											
											
												讯飞写作
												基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
																									
														AI 文本写作中文写作													
																							
										
									
																	
										
											
												
											
											
												即梦AI
												一站式AI创作平台，免费AI图片和视频生成。
																									
														图片拼接													
																							
										
									
																	
										
											
												
											
											
												ChatGPT
												最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
																									
														AI 编程开发AI 文本写作													
																							
										
									
																	
										
											
												
											
											
												智谱清言 - 免费全能的AI助手
												智谱清言 - 免费全能的AI助手
																									
														AI 编程开发Agent智能体