Question

我正在尝试创建一个假的下拉列表（ul li list），让您可以选择要播放的其他视频。然后将新视频加载到页面的背景中。

http://fh80.student.eda.kent.ac.uk/fyp/

单击下拉列表时，它应更改为其他视频。

我开始使用下拉链接上的来源：

<ul class="dropdown" tabindex="1">
                  <li><a href="images/data/cycling.webm">Cycling | Emirates Arena</a></li>
                  <li><a href="images/data/swimming.webm">Aquatics | Royal Commonwealth Pool</a></li>
                  <li><a href="images/data/athletics.webm">Athletics | Hampden Park Stadium</a></li>
              </ul>

在我的JS下拉列表中，它更改了onClick

上的源代码

obj.opts.on('click',function(){
    var opt = $(this);

    var videoTarget = $('#bgvid');
    var video = opt.find('a').attr("href");  //GRAB URL OF CLICKED LI
    videoTarget.load(video); //LOAD VIDEO URL IN TO THE TARGET AREA

    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text('Now playing: ' + obj.val);  });

但这似乎根本没有在后台重新加载视频。

Answer 1

你能尝试这样做吗？

obj.opts.on('click',function(){
    var opt = $(this);

    var videoTarget = $('#bgvid');
    var video = opt.find('a').attr("href");  //GRAB URL OF CLICKED LI

    videoTarget.find('source').attr("src", video); //LOAD VIDEO URL IN TO THE TARGET AREA     
     videoTarget.fadeOut();

     setTimeout(function(){
          videoTarget.fadeIn();
          videoTarget.load();

     },300);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text('Now playing: ' + obj.val);  });

用JS改变视频源

1 个答案: