Полноэкранное воспроизведение видео с имитацией вибрато и ползунковый переключатель

JavaScript Vue.js

1. Введение

С быстрым развитием мобильных технологий и быстрым снижением стоимости трафика данных видео и прямые трансляции становятся медиа-пиршеством для всего народа.Эффект скользящего переключения используется нашей компанией для живой идентификации и воспроизведения видео.

2 Достичь эффекта

3 Дизайнерские решения

  • проигрывание видеоvideoЭтикетка
`video`标签是HTML5新增的用于视频播放的标签，MDN对其介绍如下：

дляHTML <video>Элемент используется для встраивания медиаплеера в документ HTML или XHTML для поддержки воспроизведения видео в документе.

Совместимость следующая (из Могу ли я использовать):Его лучшая совместимость с мобильным терминалом стала одним из наших предпочтительных решений в настоящее время.

  • один видеобуфер

оvideoпомеченpreloadАтрибуты: Это свойство используется для определения того, является ли видео предварительно загруженным. Свойство имеет три выбираемых значения:none,metadata,auto

- None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
- Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
- Auto：用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。

Но на самом деле предзагружена только его часть. Он не загружает автоматически весь видеоконтент, и такая стратегия на самом деле выгодна для экономии полосы пропускания пользователя и создания ненужных запросов.

Если не установлено, значение по умолчанию определяется браузером (т. е. разные браузеры выбирают свои собственные значения по умолчанию), даже несмотря на то, что спецификация рекомендует установить для него метаданные.

Из-за различных реализаций каждого браузера некоторые браузеры имеют автоматическую настройку по умолчанию.При автоматической настройке, если на странице есть несколько видео, они будут буферизироваться одновременно, что приведет к пустой трате ресурсов и белым экранам и сбои недорогих машин Android.

Поэтому, чтобы максимально обеспечить быстрое и плавное воспроизведение текущего видео, постарайтесь сделать так, чтобы в загрузке ресурсов было только текущее видео.

  • реализация бесконечной загрузки
    • Простое решение: использовать список для бесконечной загрузки, аналогично реализации бесконечного выпадающего списка, реализация проста, но вбесконечная загрузкаОбязательно будут проблемы с производительностью страницы
    • Сложная схема: обратитесь к схеме круговой загрузки на последней странице диаграммы карусели, используйте три больших узла и выполняйте неявное переключение после каждой анимации.Схема выглядит следующим образом:

4 реализация

4.1 Реализация кода уровня шаблона

Код реализован с помощью vue.В настоящее время он состоит из трех основных узлов, расположенных вверх и вниз.Обложка видео и другая информация размещаются вверх и вниз, а собственно видеоинформация размещается посередине.Верхний и нижний узлы в основном используются для предварительного просмотра обложки видео и другой связанной информации, когда пользователь прокручивает видео.Прослушивание событий, связанных с касанием, для реализации переключения, основной код выглядит следующим образом:

<div
  :class="[isMove && 'wrap-animation']"
  :style="{ transform: `translateY(${translateY}px)`}"
  @touchstart="onTouchStart"
  @touchmove.prevent="onTouchMove"
  @touchend="onTouchEnd"
>
  <div><!-- 一些除开视频外的点赞信息等 --></div>
  <div><!-- 视频信息 --></div>
  <div><!-- 一些除开视频外的点赞信息等 --></div>
</div>

4.2 Реализация анимации автоматического переключения

  • js-реализацияPKРеализация CSS

После касания пользователя, если достигнуто условие переключения, ему необходимо переключиться на следующее видео, и анимация должна быть переключена Реализация анимации в основном включает в себя:requestAnimationFrame/setTimeoutРеализованы другие традиционные методы, а также добавлены новые css3.transition/animationЭффекты перехода и анимация. В этом примере для плавности слабых машин Android используются переходы css.transitionосуществлятьсяisMoveОпределить класс анимацииwrap-animationДобавление класса анимации реализовано следующим образом:

.wrap-animation {
  transition: transform .6s;
}
  • Переключить ли видеооценку

Это определяется расстоянием скольжения пользователя и скоростью скольжения, и один из них может быть удовлетворен.translateYПараметр записывает расстояние скольжения в скользящем начале и скольжении, а страница перетаскивается, после чего следует скольжение, и используетсяstartTimeПараметр представляет собой отметку времени в начале слайда, а оценивается в конце слайда. Если вам нужно ввести следующее видео, оно будет пропущено черезisMoveПараметр включает анимацию, а затем, изменивtranslateYпараметр для переключения.

onTouchEnd () {
  if (this.isMove || this.translateY == 0) return
  // 计算滑动速度
  const speed = Math.abs(this.translateY / (Date.now() - this.startTime));
  // 判断移动距离和滑动速度是否达到界限 如果达到界限
  if (Math.abs(this.translateY) > this.maxY || speed > this.maxSpeed) {
    // 开启切换动画 
    this.isMove = true;
    this.translateY = this.translateY < 0 ? -this.clientHeight : this.clientHeight;
    // 动画结束处理 去除动画参数，进行隐式界面切换
    setTimeout(() => {
      // 关闭切换动画 切换数据
      this.isMove = false
      this.videoIndex = this.translateY < 0 ? this.videoIndex + 1 : this.videoIndex - 1;
      this.translateY = 0;
      // 判断获取推荐视频列表信息
      // 切换视频等操作
    }, 500)
  } else {
    // 恢复原位
  }
}

В следующем кадре после окончания анимации анимация удаляется, и выполняется неявное переключение данных интерфейса и так далее, чтобы добиться эффекта бесконечной загрузки. В то же время при оценке времени окончания анимации в этом примере используетсяsetTimeoutРеализация, эта операция неточная, рекомендуется использоватьtransitionendреализуются события.

5 типов проблем

Все виды проблем в реализации, добро пожаловать в Tucao

5.1 Полноэкранное видео

Согласно МДН:

Используя предоставленный API, элемент и его дочерние элементы могут занимать весь экран и в то же время скрывать весь пользовательский интерфейс браузера и другие приложения с экрана.

В общем, есть два способа использовать полноэкранный режим: один — имитировать полноэкранный режим, а другой — родной для Интернета. Преимущество имитации полноэкранного режима заключается в том, что вы можете настроить соответствующие элементы управления для достижения цели унификации мультитерминального стиля.Конечно, это должно быть сложнее, собственный полноэкранный режим относительно удобен, и его будет легче Недостаток в том, что после полноэкранного режима вмешательства почти нет. Поэтому используется смоделированный полноэкранный режим.

5.1.1 Запрет полноэкранного воспроизведения по умолчанию на iOS

При воспроизведении видео на iOS по умолчанию для воспроизведения будет использоваться полноэкранный режим системы, и вмешательство практически не требуется, поэтому вам необходимо отключить эту возможность и имитировать полноэкранное воспроизведение. В iOS10 и более поздних версиях вы можете добавить тег видео, добавивplaysinlineАтрибут для предотвращения полноэкранного воспроизведения iOS по умолчанию, добавленный до ios9.webkit-playsinlineатрибут, если вы хотите быть совместимым, добавьте оба атрибута.

5.2 Автовоспроизведение видео

Автоматическое воспроизведение видео после входа на страницу может значительно улучшить взаимодействие с пользователем. Эта функция в основном состоит изvideoэлементautoplayРеализация атрибута, его советы по MDN следующие:

Примечания по использованию:

  • Атрибут autoplay имеет приоритет перед предварительной загрузкой. Если пользователь хочет автоматически воспроизвести видео, то, очевидно, браузер должен загрузить видео. В спецификации допускается установка свойств автозапуска и предварительной загрузки.
  • Спецификация не обязывает браузеры учитывать значение этого атрибута, это всего лишь подсказка.

Поскольку браузеры не обязаны следовать значению этого свойства, на мобильных устройствах некоторые браузеры поддерживают добавлениеautoplayАвтозапуск после свойств, некоторые настройкиautoplayа такжеmutedСвойства также могут воспроизводиться автоматически, например, IOS 10+, Chrome.

Однако после практики в Android-клиенте в большинстве случаев не удается добиться автоматического воспроизведения, а после многочисленных расследований веб-сторона не может с этим справиться.помочь клиенту, изменив соответствующие параметры контейнера веб-просмотра и добавивautoplayСвойство реализует автовоспроизведение, которое обрабатывается следующим образом:

webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

5.3 Устранение ошибок метода воспроизведения

При вызове тега видеоplayметод, если воспроизведение не поддерживается, будет сообщено об ошибке и не может быть использованоtry catchзахвачен, потому чтоvideoизplay()метод вернетPromiseобъект, если воспроизведение не удалось, вы можете передать возвращенныйPromise catchЧто касается соответствующей информации об ошибке, это очень важно для нас.Когда вызов js не воспроизводится, мы можем направлять пользователя и одновременно сообщать соответствующую информацию об ошибке и модель, особенно в отношении совместимости всех видов странных Модели Android. важно.

6 Мышление

Непрерывная плавность скольжения
Поскольку эта схема требует неявной модификации данных в следующем кадре после завершения каждого переключения, она не поддерживает непрерывное непрерывное скольжение.Есть ли лучшая схема?

Вы можете изложить свои мысли в разделе комментариев!

Категории