Video Lazy loading change the SRC Attribute but the video still not loading
0
I'm Trying to Load A Video with lazy Loading and everytime that i try the video just keep breaking like the src wasn't there but the jQuery is Adding the SRC when is the moment.
var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>As i said, the jQuery is working fine, when you reach the video it does make the change from data-src="" to src="" but either way the video keeps not working.
jquery html5 video optimization
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
add a comment |
0
I'm Trying to Load A Video with lazy Loading and everytime that i try the video just keep breaking like the src wasn't there but the jQuery is Adding the SRC when is the moment.
var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>As i said, the jQuery is working fine, when you reach the video it does make the change from data-src="" to src="" but either way the video keeps not working.
jquery html5 video optimization
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14
add a comment |
0
0
0
I'm Trying to Load A Video with lazy Loading and everytime that i try the video just keep breaking like the src wasn't there but the jQuery is Adding the SRC when is the moment.
var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>As i said, the jQuery is working fine, when you reach the video it does make the change from data-src="" to src="" but either way the video keeps not working.
jquery html5 video optimization
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
I'm Trying to Load A Video with lazy Loading and everytime that i try the video just keep breaking like the src wasn't there but the jQuery is Adding the SRC when is the moment.
var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>As i said, the jQuery is working fine, when you reach the video it does make the change from data-src="" to src="" but either way the video keeps not working.
var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>var onViewport = function(el){
var top = el.offset().top;
var elHeight = el.outerHeight;
var windowheight = jQuery(window).outerHeight(true);
var windowTop = window.pageYOffset;
var position = windowheight + windowTop;
if (position >= top){
return true;
} else {
return false;
}
}
jQuery(document).ready(function($){
var lazyVideo = $('.lazy-video');
$(window).scroll(function(){
lazyVideo.each(function(){
var $that = $(this);
var $this = $(this).find('source');
var real = $this.attr('data-src');
if (onViewport($this)){
$this.attr('src',real);
$that.load();
} else {
console.log($this + ' Not On Viewport');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:500px">
<video preload="none" class="lazy-video" playsinline="true" webkit-playsinline="true" poster="example.com/poster.jpg">
<source src="" data-src="example.mp4" type="video/mp4">
</video>
</div>jquery html5 video optimization
jquery html5 video optimization
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
asked Nov 14 '18 at 16:05
Jorge PirelaJorge Pirela
11
11
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14
add a comment |
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304334%2fvideo-lazy-loading-change-the-src-attribute-but-the-video-still-not-loading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304334%2fvideo-lazy-loading-change-the-src-attribute-but-the-video-still-not-loading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate: stackoverflow.com/q/3983036/1813169
– MTCoster
Nov 14 '18 at 16:14
Possible duplicate of How do you change video src using jQuery?
– MTCoster
Nov 14 '18 at 16:14