切换 div 并更改属性源的 Jquery 函数

Question

我已经编辑了这个问题，以更好地解释我想要做什么。 我有一个页面，在页面的一侧有一个菜单 div，在这个 div 中，菜单项是从数据库动态创建的，这允许我通过禁用视频控件将视频显示为缩略图。所以 src 属性是在菜单视频中动态创建和生成的。当对视频菜单按钮执行点击事件时，需要将来自按钮的源传递给视频播放器源属性，以便所选视频在视频播放器中播放。 最初，我查看了使用按钮切换 div，然后使用 onload 或 load 事件来交换源代码，但我认为这不是要走的路，所以这是我拥有的创建视频按钮的代码动态

视频按钮

<video id="<?php echo $vidID ?>" class="vidContainer">
<source id="vidLink" class="vidLink" src="<?php echo $vidUrl ?>"  type="video/ogg">
 Your browser does not support the HTML5 tags.

</video>

我尝试添加以下内容以从按钮获取 src 以传递到视频播放器 div

修改后的代码

<video id="<?php echo $vidID ?>" class="vidContainer" onClick="document.getElementById('vidiframeweap').getElementsByTagname('source')[0].getAttribute('src')">
<source id="vidLink" class="vidLink" src="<?php echo $vidUrl ?>"  type="video/ogg">
 Your browser does not support the HTML5 tags.

</video>

<div class="vidText"><?php echo $vidName ?></div>

这是带有视频标签的视频播放器 div，我想在其中放置按钮中的 src 代码

视频 div 代码

  <div id="vidiframeweap" class="vidiframeweap">

    <video id="player" class="player" preload="auto" controls>
    <source id="playermp4" src="" type="video/mp4">
        <source id="playerogg" src="" type="video/ogg">
    </video>  

  </div>

我希望我能更好地解释我试图实现的目标，如果有人能帮助我找出最好的方法来做到这一点，我会非常感激

Answer 1

我认为使用的元素ID是错误的，它是playermp4所以这样使用：

$('#playermp4').attr('src','http://www.dot-mov.com/uploadedVideo/testing3/EditBike3.ogv');

Answer 2

这里需要稍作修改！需要更改source或video的属性

$('#vidLink').on('click',function(){
        $('#player').toggle();
        $('#player source').attr('src','http://www.dot-mov.com/uploadedVideo/testing3/EditBike3.ogv');
       $("#player")[0].load(); //If it doesn't play
    });
});

编辑

将data-* 属性添加到您的按钮#vidLink，例如data-source，并尝试按如下方式获取源：

$('#vidLink').on('click',function(){
         $('#player').toggle();
         var sourc=$(this).data('source');
         $('#player source').attr('src',sourc);
         $("#player").load();
         $("#player").play();
     });
});