Anythingslider：當視頻播放完成時轉到下一個面板

我正在嘗試使用Anythingslider（JQuery）。Anythingslider：當視頻播放完成時轉到下一個面板

我用這個代碼自動播放視頻時，視頻面板被激活： LINK

我創建了一個演示站點HERE

這裏的JavaScript：

var playvid = function(slider) { 
var vid = slider.$currentPage.find('video'); 
if (vid.length) { 
    // autoplay 
    vid[0].play(); 
} 

}; 

$('#slider').anythingSlider({ 
// Autoplay video in initial panel, if one exists 
onInitialized: function(e, slider) { 
    playvid(slider); 
}, 
// pause video when out of view 
onSlideInit: function(e, slider) { 
    var vid = slider.$lastPage.find('video'); 
    if (vid.length && typeof(vid[0].pause) !== 'undefined') { 
     vid[0].pause(); 
    } 
}, 
// play video 
onSlideComplete: function(slider) { 
    playvid(slider); 
}, 
// pause slideshow if video is playing 
isVideoPlaying: function(slider) { 
    var vid = slider.$currentPage.find('video'); 
    return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended); 

} 
});

問題： 我想移動到s的下一個面板當視頻播放時。這可能嗎？

謝謝！

來源

2013-03-04 Stichy

剛剛解決了它。我使用THIS PAGE

像這個確切的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>AnythingSlider playground - jsFiddle demo by Mottie</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script> 

    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"/> 
    <link rel="stylesheet" type="text/css" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css"/> 

    <script type='text/javascript' src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script> 

    <script type='text/javascript' src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script> 

    <script type='text/javascript' src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script> 

    <script type='text/javascript' src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script> 

    <style type='text/css'> 
    /*** Set Slider dimensions here! Version 1.7+ ***/ 
    /* added #slider li to make panels the same size in case "resizeContents" is false */ 
    ul#slider, ul#slider li { 
     width: 300px; 
     height: 200px; 
     list-style: none; 
    } 

    </style> 

    <script type='text/javascript'>//<![CDATA[ 
    $(function() { 
     var playvid = function(slider) { 
     var vid = slider.$currentPage.find('video'); 
     if (vid.length) { 
      // autoplay 
      vid[0].play(); 
     } 
     }; 

     $('#slider').anythingSlider({ 

     // Autoplay video in initial panel, if one exists 
     onInitialized: function(e, slider) { 
     playvid(slider); 
     }, 
     // pause video when out of view 
     onSlideInit: function(e, slider) { 
     var vid = slider.$lastPage.find('video'); 
     if (vid.length && typeof(vid[0].pause) !== 'undefined') { 
      vid[0].pause(); 
     } 
     }, 
     // play video 
     onSlideComplete: function(slider) { 
     playvid(slider); 
     }, 
     // pause slideshow if video is playing 
     isVideoPlaying: function(slider) { 
     var vid = slider.$currentPage.find('video'); 
     return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended); 
     } 

    }); 
    });//]]> 
    </script> 

</head> 
<body> 
    <!-- Add additional stylesheets here --> 
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css"> 

<ul id="slider"> 
    <li class="panel5"> 
     <video width="320" height="240" controls="controls"> 
      <source src="http://css-tricks.github.com/AnythingSlider/demos/video/movie.ogg" type="video/ogg"> 
      <source src="http://css-tricks.github.com/AnythingSlider/demos/video/movie.mp4" type="video/mp4"> 
      <source src="http://css-tricks.github.com/AnythingSlider/demos/video/movie.webm" type="video/webm"> 
      Your browser does not support the video tag. But you could include an iframe/embeded video here. 
     </video> 
    </li> 
    <li><img src="http://placekitten.com/300/200" alt="" /></li> 
    <li><img src="http://placehold.it/300x200" alt="" /></li> 
    <li><img src="http://placebear.com/300/200" alt="" /></li> 
    <li><img src="http://lorempixel.com/300/200" alt="" /></li> 
</ul> 

</body> 
</html>

來源

2013-03-04 09:10:37 Stichy

Anythingslider：當視頻播放完成時轉到下一個面板

回答

相關問題