Ошибки видеобаннера

avatar
ladybugg333
1 июля 2021 в 21:07
32
1
0

У меня есть сайт с видео-баннером, который отлично работал, когда мы запускали jquery2. После обновления до jquery 3 баннерное видео больше не работает. Может ли кто-нибудь посмотреть код и увидеть, что не так? Когда я смотрю на консоль в хроме, я вижу эту ошибку (а также ошибку файла cookie): jquery.min.js: 2 Uncaught TypeError: e.indexOf не является функцией в S.fn.init.S.fn.load (jquery.min.js:2) в (индекс): 532

  <video id="BannerVideo" class="Banner" muted playsinline loop oncanplaythrough="playBannerVideo()"></video>
<script>
function playBannerVideo()
{
  var videoElement = document.getElementById('BannerVideo');
  try 
  {
    videoElement.play();
  }
  catch(err) {}
}

var basePosterURL = '/FCC/media/Images/Home2018/Banner/Banner.jpg';
var baseVideoURL = '/FCC/media/Images/Home2018/Banner/BannerVideo.mp4';

function getNameForCurrentWidth()
{
  var bodyWidth = document.body.clientWidth; // $('body').width();
  if (bodyWidth <= 767)
    return '_Phone';
  
  if (bodyWidth <= 990)
    return '_Tablet';
  
  return ''; // Desktop
}

var loadedWidthName;
function loadBannerVideo(posterOnly)
{
  var newWidthName = getNameForCurrentWidth();
  if(newWidthName == loadedWidthName)
    return;

  loadedWidthName = newWidthName;
  var videoElement = document.getElementById('BannerVideo');
   
  if (!videoElement.paused)
    videoElement.pause();
  
  videoElement.src = '';
  videoElement.poster = addToFilename(basePosterURL, loadedWidthName);
  
  if (posterOnly == true)
    return;
  
  setBannerVideoSrc(loadedWidthName);
}

function setBannerVideoSrc(newWidthName)
{
  // don't play video if in design or edit modes
  if( $('body.DesignMode').length == 1 ||  $('body.EditMode').length == 1)
    return;
  
  var videoElement = document.getElementById('BannerVideo');
  videoElement.src = addToFilename(baseVideoURL, newWidthName);
  videoElement.load();
}

// load poster as soon as possible
$(function() // document.ready
{
  loadBannerVideo(true);
});

  // load and play video after everything else loads
$(window).load(function()
{
  setBannerVideoSrc(loadedWidthName);
});

var resizeTimeout;
$(window).resize(function()
{ 
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(resizeEnd, 200);   
});
function resizeEnd()
{
  loadBannerVideo();
}
</script>
Источник

Ответы (1)

avatar
Emiel Zuurbier
1 июля 2021 в 21:37
0

Согласно этой статье с той же ошибкой, прослушиватели событий load(), error() и toggle() устарели. Это означает, что вы используете устаревший код, который больше не поддерживается jQuery.

Анализируя ваш код, я вижу, что вы используете прослушиватель событий load(). Исправление здесь заключается в использовании on для прослушивания события load.

$(window).on('load', function() {
  // ...
});

Но ваш код использует так мало jQuery и гораздо больше ванильного JavaScript, что вообще не имеет смысла использовать jQuery. Я бы порекомендовал вам выбросить его, если вы больше нигде его не используете. Если вы это сделаете, приведенный ниже фрагмент эквивалентен тому, что вы опубликовали, но без jQuery.

function playBannerVideo() {
  var videoElement = document.getElementById("BannerVideo");
  try {
    videoElement.play();
  } catch (err) {}
}

var basePosterURL = "/FCC/media/Images/Home2018/Banner/Banner.jpg";
var baseVideoURL = "/FCC/media/Images/Home2018/Banner/BannerVideo.mp4";

function getNameForCurrentWidth() {
  var bodyWidth = document.body.clientWidth;
  if (bodyWidth <= 767) return "_Phone";
  if (bodyWidth <= 990) return "_Tablet";

  return ""; // Desktop
}

var loadedWidthName;
function loadBannerVideo(posterOnly) {
  var newWidthName = getNameForCurrentWidth();
  if (newWidthName == loadedWidthName) return;

  loadedWidthName = newWidthName;
  var videoElement = document.getElementById("BannerVideo");

  if (!videoElement.paused) videoElement.pause();

  videoElement.src = "";
  videoElement.poster = addToFilename(basePosterURL, loadedWidthName);

  if (posterOnly == true) return;

  setBannerVideoSrc(loadedWidthName);
}

function setBannerVideoSrc(newWidthName) {
  // don't play video if in design or edit modes
  if (document.querySelector("body.DesignMode").length == 1 || document.querySelector("body.EditMode").length == 1)
    return;

  var videoElement = document.getElementById("BannerVideo");
  videoElement.src = addToFilename(baseVideoURL, newWidthName);
  videoElement.load();
}

// load poster as soon as possible
loadBannerVideo(true);

// load and play video after everything else loads
window.addEventListener('load', function() {
    setBannerVideoSrc(loadedWidthName);
});

var resizeTimeout;
window.addEventListener('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(resizeEnd, 200);
});

function resizeEnd() {
  loadBannerVideo();
}
ladybugg333
9 июля 2021 в 15:02
0

Если я хочу добавить файл vtt в приведенный выше скрипт, как мне это сделать? Просто добавление кода трека в код видео не работает.

Emiel Zuurbier
10 июля 2021 в 08:41
0

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