0

我有一个视频滑块，可以通过单击缩略图然后播放视频来工作。问题是我正在尝试创建一个函数，以便视频淡入而不是仅仅出现。我可以正常做到这一点，但由于缩略图/视频是列表形式，我对如何设置它感到困惑。身体部位是这样的

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

2 回答 2

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，并使用li元素索引来选择视频，但您也可以放置链接视频在一个数组中，并且仍然使用索引，例如：

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

总而言之，它看起来像：

$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).animate({opacity : 0}, 1500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).animate({opacity : 1}, 1500);
    });
});

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

这是一个FIDDLE来展示它是如何工作的，可能仍然需要一点帮助，但至少是某种演示！​</p>

于 2012-05-04T08:00:46.467 回答
0

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

于 2012-05-04T07:07:14.990 回答