短视频滑动播放在 H5 下的实现方式

实现短视频滑动播放在H5下有多种方法，以下是其中两种较为常见的方式。

方式一：使用 H5 视频插件

实现步骤

1. 在 HTML 中插入视频标签，例如：

<video src="your_video.mp4" width="100%" controls></video>

其中 src 属性为视频文件的路径，width 属性指定视频宽度，controls 属性表示使用视频播放控件。

1. 在 CSS 中设置视频标签样式，例如：

video {
  display: block;
  margin: 0 auto;
}

其中 display: block; 使视频标签成为块级元素，以便于设置宽度和居中。margin: 0 auto; 使视频标签水平居中。

1. 在 JavaScript 中使用 TouchSwipe 等插件实现滑动控制视频的播放进度，例如：

$('video').swipe({
  swipe: function(event, direction, distance, duration, fingerCount) {
    var video = $('video')[0];
    if (direction === 'left') {
      video.currentTime += 5;
    } else if (direction === 'right') {
      video.currentTime -= 5;
    }
  },
  threshold: 0
});

以上代码使用 TouchSwipe 插件，实现当用户向左滑动屏幕时，视频快进 5 秒；向右滑动屏幕时，视频快退 5 秒。

示例说明

参考以下例子：

• A11Y Style Guide: Video Thumbnails

该示例展示了通过视频缩略图诱导用户点击，从而播放视频的方式。当用户点击播放按钮后，视频自动播放并且支持滑动控制播放进度。

• Sliding Video Example

该示例展示了使用自定义控件实现滑动控制视频的位置。当用户向左或向右滑动控件时，视频的位置随之改变。

方式二：使用 CSS3 动画

实现步骤

1. 在 HTML 中插入视频标签，例如：

<video src="your_video.mp4" width="100%" preload="metadata" autoplay loop></video>

其中 src 属性为视频文件的路径，width 属性指定视频宽度，preload 属性表示仅加载视频元数据，autoplay 属性表示自动播放，loop 属性表示循环播放。

1. 在 CSS 中设置视频标签样式，并为视频添加包裹容器，例如：

.video-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slide 10s infinite linear;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

以上代码设置视频容器 .video-wrapper 的宽度比例为 16:9，并在其中嵌入视频标签。在视频样式中，设置其宽高为 100% 并与视频容器等高，object-fit: cover; 表示按比例缩放并保持宽高比，以填充整个容器。在视频动画中，使用 @keyframes 定义视频平移动画，以实现视频自动滑动的效果。

示例说明

参考以下例子：

• How to Make a Slick HTML5 Video Player with Custom Controls

该示例展示了如何在视频上方添加自定义控件，并使用 CSS3 动画实现视频的自动滑动效果。当用户点击控件时，视频会暂停或继续播放。