我有一个带有横幅视频的网站,当我们运行 jquery2 时效果很好。升级到 jquery 3 后,横幅视频不再有效。任何人都可以查看代码,看看有什么问题吗?当我在 chrome 中查看控制台时,我看到此错误(以及 cookie 错误):jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function 在 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>
答案 0 :(得分:0)
根据 this article with the same error,load()
、error()
和 toggle()
事件侦听器已弃用。这意味着您正在使用 jQuery 不再支持的过时代码。
分析您的代码,我发现您使用了 load()
事件侦听器。此处的解决方法是使用 on
侦听 load
事件。
$(window).on('load', function() {
// ...
});
但是您的代码使用的 jQuery 太少,而 vanilla 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();
}