Question

我有一个视频滑块，通过点击缩略图然后播放视频来工作。问题是我正在尝试创建一个功能，以便视频淡入而不是只显示。我可以这样做，但由于缩略图/视频是列表形式，我很困惑如何设置它。身体中的那部分是这样的

    <div id="wrapper">
      <div id="bigPic">
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
                <video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
            </div>


  <div class="buttons">
    <div id="content">
        <ul class='thumbs'>
                <li rel='1'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo1();"/></li>
                <li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo2();"/></li>
                <li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo3();"/></li>
                <li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo4();"/></li>
                <li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo5();"/></li>
                <li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo6();"/></li>
            </ul>
       </div>
      </div>
     </div>

播放视频的功能（至少是第一个）是

function playVideo1() {
       var myVideo = document.getElementsByTagName('video')[0];
           myVideo.src = 'images/clip2.mp4'
           myVideo.load();
           myVideo.play();
           myVideo.easeIn();   
       }

Answer 1

嗯，这就是我要做的！

不确定你在做什么，但我只想使用一个视频元素，并根据需要进行更改。除非您当时正在播放多个视频，否则每个视频并不需要单独的元素。

<div id="wrapper">
    <div id="bigPic">
        <video id="myVid" alt="" height="240" width="360" style="margin-left:-8px; margin-top:-16px;"/>
    </div>

    <div class="buttons">
        <div id="content">
            <ul class='thumbs'>
                <li rel='1'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
            </ul>
       </div>
    </div>
</div>

我也会删除onclick函数，而不是使用jQuery，就像这样：

$('li', '.thumbs').on('click', function() {....});

现在你所需要的只是淡化视频元素并替换源的功能，我会寻找动态的东西，最好是命名视频的video1.mp4，video2.mp4等并使用{{ 1}}元素索引来选择视频，但你也可以将视频的链接放在一个数组中，并仍然使用索引，如：

li

总而言之，它看起来像是：

var numb = $(this).index(),
    videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
    thisVideo = videos[numb];

我在视频元素中添加了一个ID，因为它比在DOM中搜索tagNames更快更容易。

这是一个FIDDLE来展示它是如何工作的，仍然需要一些帮助，但至少有一些类型的演示！

Answer 2

您可以在视频顶部放置一个实心div，然后将其淡出。音频从一开始就是全音量 - 可能会破坏效果。

fadein函数到列表的特定元素

2 个答案: