Video ausblenden, nachdem es auf SquareSpace

Ich wickle eine Squarespace-Website ein, das einzige Problem ist, dass ich versuche, ein MP4 zu der Kopfzeile hinzuzufügen, konnte ich etwas Code finden, aber das Problem ist das Video hält Schleifen , obwohl ich loop = "false" hinzugefügt habe ... Gibt es trotzdem eine Schleife zu beenden, und sobald es vorbei ist, "Anzeige: keine" über CSS?Video ausblenden, nachdem es auf SquareSpace

https://marina-toybina.squarespace.com

<script type="text/javascript"> 
    $(window).bind("load", function() { 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    } else { 
     var banner = $('#pageWrapper img').first(); 
     if (banner.length === 0) 
     banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first(); 
     if (banner.length === 0) 
     banner = $('#parallax-images img').first(); 
     if (banner.length === 0) 
     banner = $('.has-main-image img').first(); 
     if (banner.length === 0) 
      banner = $('#page-thumb img').first(); 
     var url = "/s/Countdown-Intro_06.mp4"; 
     banner.hide(); 
     $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner); 
     adjustBanner($('.bannerVideo'), banner); 
     setTimeout(function() { 
     adjustBanner($('.bannerVideo'), banner); 
     }, 2000); 
     $(window, banner).resize(function() { 
     adjustBanner($('.bannerVideo'), banner); 
     setTimeout(function() { 
      adjustBanner($('.bannerVideo'), banner); 
     }, 200); 
     }); 
    } 
    function adjustBanner (video, banner) { 
     video.css({ 
     height: banner.css('height'), 
     width: banner.css('width'), 
     top: banner.css('top'), 
     left: banner.css('left'), 
     position: 'relative', 
     'object-fit': 'inherit' 
     }); 
    } 
    }); 
</script>

Quelle

2016-07-14 Rob Orf

Ist es ein YouTube-Video? Denn wenn ja, dann könntest du das YouTube-API verwenden, um ein Video zu erstellen und es dann bis zum Abschluss zu verfolgen - http://stackoverflow.com/questions/25184549/hide-div-after-youtube-video-ends – Adjit

Tatsächlich ist es ein MP4 ... :( –

Gut in diesem Fall, immer noch ziemlich einfach und machbar: http://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes – Adjit

Da Sie mit jQuery schon kann es einfacher sein, mit ihm zu einfach zu halten ... hier ist mein Vorschlag -

var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>'); 

$video.insertAfter(banner); 

$video.on('ended', function(){ 
    //do something when video ends 
});

Quelle

2016-07-15 18:13:50 Adjit

Danke Adjit! was könnte ich verstecken um das video wo "// mach was wenn video endet" zu verstecken. Könnte es video.css ({display: 'none',}) sein? –

@RobOrf kein Problem, ja du kannst das tun. Es würde '$ video' nicht nur einfach' video' verwenden, da '.css' eine' jQuery' Funktion ist, müssen Sie dem Programm mitteilen, dass 'video' ein' jQuery' Objekt ist. Wenn dies die richtige Antwort war, um Ihnen zu helfen, dann markieren Sie es bitte als korrekt, damit andere es wissen. – Adjit

@RobOrf können Sie auch '$ video.fadeOut ('schnell');' – Adjit

Adjit, das ist, was Sie vorgeschlagen, Allerdings läuft mein Video weiter und endet nicht nach dem Abspielen. Siehe hier: marina-toybina.squarespace.com

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script type="text/javascript"> 
$(window).bind("load", function() { 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
} else { 
    var banner = $('#pageWrapper img').first(); 
    if (banner.length === 0) 
    banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first(); 
    if (banner.length === 0) 
    banner = $('#parallax-images img').first(); 
    if (banner.length === 0) 
    banner = $('.has-main-image img').first(); 
    if (banner.length === 0) 
     banner = $('#page-thumb img').first(); 
    var url = "/s/Countdown-Intro_06.mp4"; 
    banner.hide(); 
var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>'); 

$video.insertAfter(banner); 

$video.on('ended', function(){ 
$video.fadeOut('fast'); 
});  
adjustBanner($('.bannerVideo'), banner); 
    setTimeout(function() { 
    adjustBanner($('.bannerVideo'), banner); 
    }, 2000); 
    $(window, banner).resize(function() { 
    adjustBanner($('.bannerVideo'), banner); 
    setTimeout(function() { 
     adjustBanner($('.bannerVideo'), banner); 
    }, 200); 
    }); 
} 
function adjustBanner (video, banner) { 
    video.css({ 
    height: banner.css('height'), 
    width: banner.css('width'), 
    top: banner.css('top'), 
    left: banner.css('left'), 
    position: 'relative', 
    'object-fit': 'inherit' 
    }); 
} 
}); 
</script>

Quelle

2016-07-17 19:06:45

Video ausblenden, nachdem es auf SquareSpace

Antwort

Verwandte Themen