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

Posted 2023-05-09

【中文标题】使用 JQuery 或 Javascript 在 IFrame 中将视频替换为另一个视频

【英文标题】：Replace a video with another in an IFrame using JQuery or Javascript

【发布时间】：2014-12-27 04:50:21

【问题描述】：

我有以下 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>
    .hoveritemcursor: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"   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>

【参考方案1】：

你来了:)

$(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"   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>

【讨论】：

谢谢博扬 - 我只希望我在 6 小时前问过这个问题......一直在扯我的头发 - - 所以似乎 1.9.1 是答案并将网址放入数据中-video 属性 -