0

Anythingslider (JQuery) を試しています。

このコードを使用して、ビデオ パネルがアクティブなときにビデオを自動再生しました: 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);

}
});

問題: ビデオが再生されたときに、スライドの次のパネルに移動したい。これは可能ですか？

ありがとう！

4

1 に答える 1

0

ちょうどそれを解決しました。このページの正確なコードを使用しました

このような：

<!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-04T09:10:37.250 に答える