本教程详细指导如何将现有的图片触摸滑动组件改造为支持视频内容的滑动播放器。通过调整HTML结构、适配CSS样式和优化JavaScript事件处理，特别是阻止视频元素的默认拖拽行为，确保滑动功能流畅运行，解决滑动器可能出现的“冻结”问题，实现响应式、交互友好的视频展示。
引言：从图片到视频的滑动体验
在现代web应用中，触摸滑动组件因其直观的用户体验而广受欢迎。最初，这类组件多用于展示图片画廊。然而，随着富媒体内容的兴起，将图片滑动器升级为视频滑动器成为一个常见的需求。将静态图片替换为动态视频并非简单的标签替换，视频元素自带的交互行为（如拖拽、播放控制）可能会与滑动组件的自定义javascript
HTML结构重构：引入视频元素
将图片滑动器改造为视频滑动器，最核心的步骤是替换HTML中的 标签。为了确保视频能够正确加载、显示并提供用户控制，需要注意以下几点：
替换标签： 将每个
内部的
标签替换为
标签。视频源： 使用 标签指定视频文件的URL。为了更好的兼容性，可以提供多种格式的视频源。控制条： 添加 controls 属性，为用户提供播放、暂停、音量等基本控制。尺寸： 可以通过 width 和 height 属性设置视频的初始尺寸，但通常更推荐通过CSS进行响应式控制。
以下是改造后的HTML结构示例：
iPhone 12 $799 您的浏览器不支持视频播放。 Buy Now
CSS样式适配：确保视频显示正常
将 后，需要相应地调整CSS样式，以确保视频在滑动器中能够正确地布局和响应。关键在于将原来针对 img 元素的样式规则应用到 video 元素上。
视频尺寸与布局： 确保视频能够在其父容器 (.slide) 内正确缩放，并保持居中。替换选择器： 将 .slide img 相关的样式选择器更改为 .slide video。
以下是适配后的CSS样式：
立即学习“Java免费学习笔记（深入）”；
@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 = 0slides.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 menuwindow.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 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
触摸滑动视频播放器 @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; } .slide video { /* 注意这里是 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; margin-top: 1rem; border-radius: 5px; } .grabbing { cursor: grabbing; } .grabbing .slide video { /* 注意这里是 video 选择器 */ transform: scale(0.9); } iPhone 12 $799 <source src="https://player.vimeo.com/external/334344435.sd.mp4?s=d367341a941ffa97781ade70e4f4a28f4a1a5fc8&profile_id=165&oauth2_token_id=57
以上就是基于HTML、CSS和JavaScript构建触摸滑动视频播放器教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。https://www.chuangxiangniao.com/p/1575467.html
(0)
打赏
相关推荐
本文详细介绍了如何将一个基于HTML、CSS和JavaScript实现的图片触摸滑动组件改造为支持视频内容的滑动播放器。通过替换HTML中的标签为，并相应调整CSS样式以适配视频元素，同时确保JavaScript逻辑能够正确处理视频元素的拖拽事件，最终实现一个响应式、交互流畅的视频轮播解决方案。 1…
本教程详细介绍了如何从 jQuery DateTimePicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue() 方法在特定事件（如表单提交）后按需获取，以及利用 onChangeDateTime 事件处理器实时捕获值的变化。文章将提供清晰的代码示例，并强调…
本教程详细介绍了如何将现有的图片触控滑块改造为功能完善的视频触控滑块。通过修改HTML结构，将标签替换为，并相应调整CSS样式以适应视频元素。关键在于更新JavaScript逻辑，确保事件监听器正确绑定到视频元素，从而实现流畅的触摸和鼠标滑动交互，解决原先在视频模式下可能出现的“冻结”问题。 核心问…
本教程详细介绍了如何使用纯 CSS 实现对溢出容器的长文本进行动态“来回”滚动动画，以确保用户能够完整阅读所有内容。文章涵盖了关键的 CSS 属性配置，如 max-width、overflow、display: inline-block、width: fit-content 以及 @keyframe…
本教程详细介绍了如何从 jQuery Datetimepicker 控件中获取用户选定的日期和时间值。文章提供了两种核心方法：一是通过调用 getValue() 方法直接获取，适用于表单提交或特定事件触发时；二是通过配置 onChangeDateTime 事件回调函数，实现实时或事件驱动的值获取。教…
本教程详细介绍了如何从 jQuery Datetimepicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue() 方法在特定事件（如表单提交）中获取，以及利用 onChangeDateTime 事件实时捕获值。文章将提供清晰的代码示例和注意事项，帮助开发者高…
本教程详细介绍了如何从 jQuery DateTimePicker 插件中获取用户选定的日期和时间值。我们将探讨两种主要方法：通过调用 getValue 方法在特定事件触发时获取，以及利用 onChangeDateTime 事件在值发生变化时实时获取。文章将提供代码示例和使用场景，帮助开发者高效地集…
本教程详细介绍了如何从 jQuery Datetimepicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue API 方法在特定事件（如表单提交）中获取值，以及利用 onChangeDateTime 事件实时捕获值的变化。文章将提供示例代码和使用场景，帮助开…
本教程详细阐述了如何在PHP动态生成的多卡片场景中，为每个卡片集成独立的JavaScript倒计时功能。核心内容在于解决PHP变量与JavaScript document.getElementById 方法之间的正确交互，确保每个倒计时器能够准确更新其对应的HTML元素，从而实现高效、可扩展的动态时…
本教程详细探讨了网页中图片溢出容器的常见问题及其解决方案。我们将深入分析如何利用CSS属性，如max-width、height、width以及父级元素的高度管理，确保图片在各种布局下都能完美适应其容器，避免破坏页面结构，并提供实用的代码示例和专业建议。 引言：图片溢出容器的挑战 在网页开发中，图片是…
本教程旨在解决在纯HTML/CSS/JavaScript网站中为屏幕阅读器（如TalkBack）设置初始焦点的问题。文章将详细介绍如何通过HTML的autofocus属性和JavaScript的focus()方法来指定页面加载时的焦点元素，并强调确保目标元素本身是可聚焦的关键性，以提升网站的可访问性…
本文旨在帮助开发者解决 JavaScript 中表单提交按钮点击后，数据无法正常显示或提交的问题。通过分析问题原因，并提供修改后的代码示例，详细讲解如何正确地使用 event.preventDefault() 阻止表单默认提交行为，并确保数据在表单内的 div 元素中正确显示。 在 Web 开发中，…
本文旨在解决网页开发中图片内容溢出其父容器的常见问题。我们将深入探讨导致图片溢出的原因，并提供一系列基于CSS的有效解决方案，包括利用max-width、height: auto以及对多层嵌套容器进行尺寸控制的策略，确保图片在各种布局下都能保持在其指定区域内，从而提升页面的响应性和视觉一致性。 理解…
本文详细阐述了如何利用PHP从数据库获取时间数据，并结合JavaScript实现前端动态倒计时功能。重点解决在多卡片场景下，通过唯一ID将后端数据与前端DOM元素精确关联的问题，确保每个卡片都能独立显示其专属计时器，并提供关键代码示例和集成技巧，帮助开发者构建高效、准确的计时器应用。 在现代web应…
本教程详细阐述如何利用CSS Flexbox模型，特别是display: flex和justify-content: space-between属性，高效地实现导航栏链接的动态间距和精确布局。通过实际代码示例，您将学会如何轻松创建响应式且美观的导航菜单，满足从左至右、两端对齐等多种布局需求，告别传统…
本文详细介绍了如何在PHP后端生成动态内容并结合JavaScript实现前端多卡片倒计时功能。重点阐述了如何安全有效地将PHP变量传递给JavaScript，以及正确使用document.getElementById为每个独立元素更新倒计时，旨在帮助开发者构建高效、准确的实时计时应用。 在现代web…
本文旨在解决JavaScript表单提交按钮失效的问题。通过将相关元素包裹在` javascript: const result = document.getElementById(‘result’);const userNameInput = function(event) { // 阻止表单的默…
本教程详细介绍了如何使用CSS Flexbox模型来精确控制导航栏链接的间距和对齐方式。通过在导航容器上应用display: flex和justify-content: space-between属性，可以轻松实现链接在导航栏内的两端对齐和均匀分布，从而构建出结构清晰、响应性强的导航菜单。 导航栏布…
本教程深入探讨了在网页布局中图片溢出容器的常见问题及其解决方案。通过详细分析CSS属性如width、height、max-width、object-fit，以及对父级容器尺寸的精确控制，文章提供了确保图片在各种布局下都能完美适应容器、避免溢出的专业指导和代码示例，帮助开发者构建响应式且视觉协调的网页…
本教程详细阐述了如何在纯HTML和JavaScript环境中，为网页上的屏幕阅读器（如TalkBack）设置初始焦点。文章涵盖了两种主要方法：利用HTML的autofocus属性和JavaScript的focus()方法。重点强调了确保目标元素是可聚焦的重要性，并提供了使非交互式元素可聚焦的策略，旨…
