Описание проблемы

В широкоэкранном визуальном проекте компании на широкоэкранной странице будет несколько компонентов videojs, и каждый компонент будет соответствовать адресу видеопотока. Всякий раз, когда видео начинает воспроизводиться, видеопоток m3u8 будет продолжать запрашивать. Даже если воспроизведение приостановлено, запрос не будет завершен. Большое количество запросов приведет к зависанию страницы, что в конечном итоге приведет к проблемам с производительностью, что приведет к зависанию или даже сбою браузера.

При работе на большом экране,Часто используется связь компонентов.,Нажмите на карту Baidu из точки,Появится всплывающее окно с видео,Нажмите, чтобы закрыть видео,На самом деле видео скрыто.,и видеоиз Запросы продолжаются。для Чтобы решить эту проблему,Я потратил некоторое время на исследование,Найдено решение.

Решение

Из официальной документации videojs мы можем узнать, что существует метод Dispose. Этот метод используется для уничтожения объекта videojs. Однако этот метод нельзя использовать напрямую, прямое использование вызовет новую проблему, то есть после уничтожения экземпляра исходный элемент dom тега видео также будет уничтожен. Эту функцию можно увидеть в официальной документации.

Videojs Removing Players

На самом деле, я лично считаю, что характеристики операции 2 этого метода очень плохие. Это приведет к уничтожению компонента сразу после закрытия, что приведет к запуску всплывающего окна видео в следующий раз (бизнес-требование — нажать кнопку). в легенде карты Baidu, и появится всплывающее окно для воспроизведения прямой трансляции видео). Нет видеокомпонента, который можно было бы отобразить для воспроизведения.

Поэтому я написал программу просмотра Vue для этого компонента проекта, чтобы отслеживать свойство отображения. В этом проекте каждый компонент имеет этот атрибут. Если display имеет значение false, он отображается, а если true, то он скрыт (не спрашивайте, почему он перевернут, я не знаю). Пример кода выглядит следующим образом:

<template>
  <div :style="styleObject" ref="myvideojs">
    <!-- <video
      :id="videojsId"
      class="video-js vjs-big-play-centered vjs-fluid"
      style="width: 100%; height: 100%; object-fit: fill"
    ></video> -->
    <!-- padding-top: 0. Решите проблему, связанную с тем, что высота не может адаптироваться после уменьшения высоты до определенного значения. -->
    <video :id="videojsId" class="video-js vjs-big-play-centered vjs-fluid" style="width: 100%; height: 100%; object-fit: fill; padding-top: 0" ref="videoPlayer"></video>
  </div>
</template>

 watch: {
    ...
    display: {
      handler(newVal) {
        // true Представляет собой скрытое
        if (newVal) {
          console.log("Скрыть :>> ")
          if (this.myVideo) {
            this.$nextTick(() => {
              // Его надо сначала приостановить, потом уничтожить, а потом уничтожить dom элементы также будут удалены, поэтому вам придется добавить их вручную id из dom
              this.myVideo.dispose()
              // Этот ниже dom и video Атрибуты метки согласованы
              const videoElement = document.createElement("video")
              videoElement.setAttribute("id", this.videojsId) //Уведомление id Будьте последовательны
              videoElement.setAttribute("class", "video-js vjs-big-play-centered vjs-fluid")
              videoElement.setAttribute("style", "width: 100%; height: 100%; object-fit: fill; padding-top: 0")
              videoElement.setAttribute("ref", "videoPlayer")
              this.$refs.myvideojs.appendChild(videoElement) //Добавляем то же самое DOM
              this.myVideo = null
            })
          }
        } else {
          console.log("показать :>> ")
        }
      },
    },
  }

Вот как нарисовать компонент:

methods: {
    // метод рисования
    drawChar(result) {
      let that = this
      if (result.length > 1) {
        console.log(this.MapPoiChange)
        console.log(this.option.Playtype)
        let key = this.MapPoiChange ? this.MapPoiChange : this.option.Playtype ? this.option.Playtype : "SXT"
        result = result.filter(v => {
          return v.key == key
        })[0]
      } else {
        result = result[0]
      }
      // Эти атрибуты параметров также можно установить непосредственно в теге видео, см. muted
      // создан экземпляр,Изменить последний URL-адрес
      if (this.myVideo) {
        this.myVideo.src({ type: result.type, src: result.value })
      } else {
        let options = {
          autoplay: this.option.autoplay, // Настроить автозапуск
          controls: true, // Показать элементы управления воспроизведением
          width: this.component.width,
          height: this.component.height,
          sources: [
            {
              src: result.value,
              type: result.type, // Сообщите videojs, что это поток hls.
            },
          ],
        } // Первый параметр videojsiz указывает, что из,видеоидентификатор в документе
        this.myVideo = Videojs(this.videojsId, options, function onPlayerReady() {
          this.on("error", function () {
            // Сообщение об ошибке
            var mediaError = this.error()
            console.log("mediaError", mediaError)
            // Обработка исключений
            that.updateData()
          })
        })
      }
    },
  },

В приведенном выше коде есть три основных момента:

1. При закрытии уничтожьте videojs;
2. Сразу после уничтожения создайте dom, такой же, как предыдущий videojs, особенно идентификатор должен быть согласованным;
3. Повторно инициализировать рендеринг videojs при отображении (поскольку глобальный метод по умолчанию будет вызывать drawChar, в противном случае вам необходимо добавить новый метод рисования в логике отображения)

Если вы обратите внимание на эти три основных момента, подобные проблемы можно легко решить.

На что следует обратить внимание

1. Уничтожение должно быть завернуто в \$nextTick, иначе возникнет ошибка.

Error:Invalid target for nutl#on;must be a DOM node or evented object

1. Вам необходимо добавить корневой dom, такой же, как предыдущий videojs, через AppendChild, иначе будет сообщено об ошибке, что идентификатор этого элемента не может быть найден:

TypeError: The element or ID supplied is not valid. (videojs)

Подвести итог

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

Выше я делюсь опытом решения этой проблемы. Добро пожаловать для обмена мнениями в области комментариев.

ссылка

vue использует videojs для управления фоновым запросом данных m3u8 — bomdeyada — Blog Park

Я участвую в последнем конкурсе эссе для специального учебного лагеря Tencent Technology Creation 2024, приходите и разделите со мной приз!