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 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

这里必须进行轻微修改！您需要更改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(); }); });

Answer 2

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

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

Jquery函数，用于切换div并更改atrribute源

2 个答案: