使用JQuery或Javascript在IFrame中用另一个视频替换视频

Replace a video with another in an IFrame using JQuery or Javascript

本文关键字：视频 另一个 替换 IFrame JQuery Javascript 使用      更新时间：2023-09-26

我有以下html和jquery-我正在尝试用隐藏span标签中的视频替换加载的初始视频。IFrame的src被替换，但视频消失，什么也不显示。我相信这可能与托管公司托管和渲染文件的方式有关。我试过JQuery重载和克隆，但没有乐趣。也许有人遇到过类似的问题

<script src="https://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $(".hoveritem").click(function () {    
        var itemtext = '#' + $(this).attr('rel');           
        var videolink = itemtext + 'vid';           
        $("#contentvid").attr('src', $(videolink).html());
        //$("#contentvid").replaceWith($("#contentvid")).clone();
    });
 });
</script>
<style>
    .hoveritem{cursor:pointer}
</style>
<div>
<div>
    <div id="contenttext">            
        <div style="float:left;;">
            <h3>Hello</h3>
            <p>Click the buttom to replace the video</p>
        </div>
    </div>
    <div class="VideoArea" style="border:solid 1px black">
        <iframe id="contentvid" width="230" height="120" src="0" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe>
    </div>
    <div style="clear:both"></div>
</div>
<div>&nbsp;</div>
<div id="GivingGrove" class="hoveritem" rel="givinggrovetext">
    <div id="givinggrovetext">
        <div  >
            <div class="TextArea">
            <button value="">Change Video</button>
            </div>
            <span id="givinggrovetextvid" style="display:none">h&w=230</span>                
        </div>
    </div>
</div>

这里是：）

$(document).ready(function() {
  $(".hoveritem").click(function() {
    var change = $(this).find('.change').data('video');
    $("#contentvid").attr('src', change);
  });
});
.hoveritem {
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <div>
    <div id="contenttext">
      <div style="float:left;;">
        <h3>Hello</h3>
        <p>Click the buttom to replace the video</p>
      </div>
    </div>
    <div class="VideoArea" style="border:solid 1px black">
      <iframe id="contentvid" width="230" height="120" src="https://video.homegroup-media.co.uk/video/416Ql4rU1?h=120&w=230" frameborder="0" style="overflow:hidden" scrolling="no" allowfullscreen></iframe>
    </div>
    <div style="clear:both"></div>
  </div>
  <div>&nbsp;</div>
  <div id="GivingGrove" class="hoveritem" rel="givinggrovetext">
    <div id="givinggrovetext">
      <div>
        <div class="TextArea">
          <button class="change" data-video="https://video.homegroup-media.co.uk/video/9RUyIKYxJ?h=120&w=230">Change Video</button>
        </div>
        <span id="givinggrovetextvid" style="display:none"></span> 
      </div>
    </div>
  </div>

相关文章：