在SquareSpace結束後隱藏視頻

我正在包裝一個Squarespace網站，唯一的問題是我試圖向頭添加MP4，我能夠找到一些代碼，但問題是視頻不斷循環，即使我加了loop =「false」......有沒有辦法結束循環，一旦結束，通過css「顯示：無」？在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>

來源

2016-07-14 Rob Orf

這是YouTube視頻嗎？因爲如果是這樣，那麼你可以使用YouTube的API來創建一個視頻，然後跟蹤它完成 - http://stackoverflow.com/questions/25184549/hide-div-after-youtube-video-ends – Adjit

其實它是一個MP4 ... :( –

那麼在這種情況下，仍然非常簡單和可以：http://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes – Adjit

既然你已經使用jQuery它可能更容易只是堅持下來...這是我的建議 -

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 
});

來源

2016-07-15 18:13:50 Adjit

謝謝合適！我可以放什麼來隱藏視頻「//在視頻結束時做些什麼」的地方。可能是video.css（{display：'none'，}）;？ –

@RobOrf不是問題，是的，你可以做到這一點。它會使用'$ video'而不僅僅是'video'，因爲'.css'是一個'jQuery'函數，您需要告訴程序'video'是一個'jQuery'對象。如果這是幫助你的正確答案，那麼請將其標記爲正確，以便其他人知道。 – Adjit

@RobOrf你也可以做'$ video.fadeOut（'fast'）;' – Adjit

Adjit，這是你的建議，但是我的視頻會繼續循環播放，並且在播放後不會結束。請看這裏：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>

來源

2016-07-17 19:06:45

在SquareSpace結束後隱藏視頻

回答

相關問題