Question

我有以下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>

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

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

1 个答案: