Question

我在网站上使用Anything Slider在滑块视图中显示视频。我想为视频添加字幕，就像它们在http://jsfiddle.net/Mottie/ycUB6/34/演示中所示但是，当我尝试使用演示中显示的代码时，它不会显示字幕但会缩小视频。

这是我的html文件：

    <!DOCTYPE html>
    <html>
<head>
    <title>Games</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/gamesPageStyle.css" />
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../CSS-Tricks-AnythingSlider/js/jquery.min.js"><\/script>')</script>
    <script src="../CSS-Tricks-AnythingSlider/js/swfobject.js"></script>
    <link rel="stylesheet" href="../CSS-Tricks-AnythingSlider/css/anythingslider.css">
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.js"></script>
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.video.js"></script>
    <script src="../js/hoverActiveLink.js"></script>
    <script src="../js/slider.js"></script>

</head>
<body>
        <div id="logoBlock" class= "grid_4">
            <!--<h1>Logo</h1>-->
            <img width=200px src="../img/IshiharaPlate3.svg" alt="Logo" />
        </div>

            <div id="navigation" class="grid_8 omega">
                <ul id="navList">
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/MichaelHomePage.html" id="homeNav">Home</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle" >
                            <a  class= "round-button" href="../html/gamesPage.html" id="gamesNav">Games</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
                        </div></div>
                    </li>                   
                </ul>
            </div>  


    <script>
    // DOM Ready
    $(function(){
        $('#slider')
            .anythingSlider({
                resizeContents      : true,
                addWmodeToObject    : 'opaque',
                navigationFormatter : function(index, panel){ // Format navigation labels with text
                    return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
                }
            })
            // Initialize video extension
            // see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
            .anythingSliderVideo({
                // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
                videoId : 'asvideo',
                // auto load YouTube api script
                youtubeAutoLoad : true,
                // see:  https://developers.google.com/youtube/player_parameters#Parameters
                youtubeParams: {
                    modestbranding : 1,
                    iv_load_policy : 3,
                    fs : 1
                }
            });
    });
</script>

    </head>

    <body>

<br>

    <div id="section1" class="grid_9">
<!-- START AnythingSlider -->
<ul id="slider">

    <!-- Vimeo: iframe -->
    <li class="panel1">
    <iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe></li>

    <!-- Vimeo: Embeded -->
    <li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>

    <!-- YouTube: iframe -->
    <li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>

    <!-- YouTube: Embedded -->
    <li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <!-- HTML5 Video -->
    <li class="panel5">
        <video width="320" height="240" controls="controls">
            <source src="demos/video/movie.ogg" type="video/ogg">
            <source src="demos/video/movie.mp4" type="video/mp4">
            <source src="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 class="panel6"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel7"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel8"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel9"><object width="480" height="385"><param name="movie"    value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param    name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always">    </param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"   type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"   width="480" height="385"></embed></object>
    <div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit  amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia  Curae.</div>
    </li>
</ul> <!-- END AnythingSlider -->
<br>
    <div id="current-caption"></div>
        </div>  

        <div id="contact" class="grid_5 omega">
            <p><span>Contact Information</span></p>
            <div id="image" class="grid_4">
            <img src="../img/IshiharaPlate3.svg" alt="Logo" />
            </div>
        </div>      

    <script src="../jquery.fitvids.js"></script>        
       <script>
      // Target your .container, .wrapper, .post, etc.
      $("#game1").fitVids();
    </script>
    <body id="games">   
</body>
    </html>

这是我的css文件：

    /*global*/

    body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background:  #333333;
    }

    a {
color: #4fb69f;
text-decoration: none;
    }

    /*typography*/

    h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
    }

    h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
    }
    h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
    }


    #logoBlock{
    position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;  
width: 100%;
height: 15%; 
    } 

    #logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
    }

    #logoBlock img {
width: 20%;
height: 20%;
    }

    #navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
    }

    #navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 16%;

    }

    #navigation li {
display:inline;
float: left;
padding: 2%;
    }

    .round-button {
width:85%;
    }
    .round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
    border-radius: 50%;
border:10px solid #ff8080;
    overflow:hidden;

    background: #c83737; 
    box-shadow: 0 0 3px gray;
    }
    .round-button-circle:hover {
background:#30588e;
    }
    .round-button a {
    display:block;
float:left;
width:100%;
padding-top:50%;
    padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;

text-align:center;
color:#F5F5DC;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    }

    #contact{
position: relative;
width: 200px;
height: 50px;
    }
    #contact img{
position: relative;
width: 20px;
height: 20px;
    }

    #image{
position: absolute;
width: 100px;
height: 100px;
    }

    /*** Set Slider dimensions here! Version 1.7+ ***/
    ul#slider {
    width: 800px;
    height: 700px;
    list-style: none;
    }

    .caption { display: none; }
    #current-caption { width: 300px; margin: 10px auto; text-align: center; }

    #section1 {
position: relative;
height: 20%;
width: 100%;
    }

    #section 1  h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
    }

    #game1 {
position: relative;
left: 30%;
top:-10%;
    }


    #section2 {
position: relative;
height: 20%;
width: 100%;
    }

    #game2 {
position: relative;
left: 30%;
top:-10%;
    }


    #section3 {
position: relative;
height: 20%;
width: 100%;
    }

    #game3 {
position: relative;
left: 30%;
top:-10%;
    }


    #section4 {
position: relative;
height: 20%;
width: 100%;
    }

    #game4 {
position: relative;
left: 30%;
top:-10%;
    }

    #section5 {
position: relative;
height: 20%;
width: 100%;
    }

    #game5 {
position: relative;
left: 30%;
top:-10%;
    }

    #section6 {
position: relative;
height: 20%;
width: 100%;
    }

    #game6 {
position: relative;
left: 30%;
top:-10%;
    }


    #section7 {
position: relative;
height: 20%;
width: 100%;
    }

    #game7 {
position: relative;
left: 30%;
top:-10%;
    }

    body#home .round-button a#homeNav,
    body#games .round-button a#gamesNav,
    body#resume .round-button a#resumeNav,
    body#contact .round-button a#contactNav {
    background: #30588e;
    }

我也在使用演示中的js文件：

    var updateCaption = function(slider){
    var cap = slider.$currentPage.find('.caption').html();
    $('#current-caption')
    .html(cap)
    .fadeIn(200);
    };

    $('#slider1').anythingSlider({

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) { updateCaption(slider); },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
    $('#current-caption').fadeOut(200);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) { updateCaption(slider); }
    });

如果有人对如何正确显示字幕有任何建议，就像他们在演示中所做的那样，我将非常感谢！谢谢，杰西卡

Answer 1

上述代码中共享的HTML包含3个<body>标记。 MDN states：

文档中只有一个<body>元素。

有趣的是，W3C spec似乎没有表明这一点。

无论如何，回到答案。应该合并初始化AnythingSlider和更新外部字幕的代码。它还需要一些CSS来隐藏每张幻灯片中的标题，因为它们没有显示。我创建了这个（demo），它结合了<body>标记，但不要复制并粘贴整个代码，因为它链接到GitHub上的插件文件。

CSS

.caption { display : none; }

脚本

$(function(){

    var updateCaption = function(slider){
        var cap = slider.$currentPage.find('.caption').html();
        $('#current-caption')
            .html(cap || '')
            .fadeIn(200);
    };

    $('#slider')
        .anythingSlider({
            resizeContents      : true,
            addWmodeToObject    : 'opaque',
            navigationFormatter : function(index, panel){ // Format navigation labels with text
                return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
            },
            // Callback when the plugin finished initializing
            onInitialized: function(e, slider) {
                updateCaption(slider);
            },
            // Callback before slide animates
            onSlideBegin: function(e, slider) {
                $('#current-caption').fadeOut(200);
            },
            // Callback when slide completes - no event variable!
            onSlideComplete: function(slider) {
                updateCaption(slider);
            }
        })
        // Initialize video extension
        // see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
        .anythingSliderVideo({
            // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
            videoId : 'asvideo',
            // auto load YouTube api script
            youtubeAutoLoad : true,
            // see:  https://developers.google.com/youtube/player_parameters#Parameters
            youtubeParams: {
                modestbranding : 1,
                iv_load_policy : 3,
                fs : 1
            }
        });
});

使用Anything Slider时，标题显示不正确

1 个答案: