Question

我正在尝试通过图片点击显示带有codeignier的视频。我在forloop的帮助下显示图像。

 <div class="inner active">
<img src="imagepath" alt="" class="img-thumbnail" width="320" height="240" onclick="loadvideo('<?php echo $cam->ip;?>')" />
</div>

我有一个隐藏的视频div

<div class="video" style="display: none;">
      <video  id="v1" width="320" height="240" controls="controls">

      </video>
    </div>

使用ajax调用在视图中创建视频和显示。我点击第一张图片，我需要用视频替换图像。另一张图片必须保持不变。这就是我想要做的事情。但现在我的两张图片正在改变并显示视频。我应该怎么做才能显示一个视频而另一个图像保持不变。我的脚本如下

  success: function(data){
               $('.inner').hide();
               $('.video').show();
               $('#loadingmessage').hide();
               $("#v1").html('<source src='+data.video+' type="video/mp4 "></source>' );

Answer 1

您尚未提供完整的代码。根据您的查询，您尚未创建动态ID。使用了这个意味着它不是唯一的类。

尝试动态创建每个对象的ID。并使用该动态Id来使用show hide功能。例如：

inner_vid0001, inner_vid0002, inner_vid0003

video_show0001, video_show0002, video_show0003

Answer 2

我不知道我是否理解你的问题，你是否期待这样的事情？

当您单击任何图像时，它将替换为基础视频。这是一个非常基本的代码/想法，您可以非常轻松地改进此代码。

＆＃13;

$(document).ready(function() {

  $('.item').click(function() {
    $(this).find('img').attr('style', 'display:none');
    $(this).find('.hide').removeClass('hide').addClass('show');
  });

});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active">
      </li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">

        <div class="hide" id="Vid1">
          <video id="v1" width="320" height="240" controls="controls" src="http://techslides.com/demos/sample-videos/small.mp4">
          </video>
        </div>

      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">

        <div class="hide" id="Vid2">
          <video id="v2" width="320" height="240" controls="controls"></video>
        </div>

      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">

        <div class="hide" id="Vid3">
          <video id="v3" width="320" height="240" controls="controls"></video>
        </div>


      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

＆＃13;

Answer 3

有更好的方法可以动态更改视频src。

你需要在Firefox上测试它，但它应该工作。 load()函数存在一些问题。

success: function(data){
     $('.inner').hide();
     $('.video').show();
     $('#loadingmessage').hide();
     $("#v1").src = data.video;
     $("#v1").load();

Answer 4

想象一下你有这些元素：

<div>
 <img id="1" src="blabla.jpg">
 <img id="2" src="blabla2.jpg">
</div>

你想用视频替换一个图像，对吧？您必须使用一个视频调用该图像的ID。像这样：

$('#1').click(function(e){
  e.eventPreventDefault();
  $(this).replaceWith('<div class="video" style="display: none;">
      <video  id="v1" width="320" height="240" controls="controls">

      </video>
    </div>');
});

或者您可以使用each（）函数循环该图像

$('img').each(function(i,e){
  $(this).replaceWith($('<div class="video" style="display: none;">
      <video width="320" height="240" controls="controls">

      </video>
    </div>').click(function(e){
  //Call ajax
  }));
  });

在ajax中，插入源标记：

success: function(data){
               $("#v1").html('<source src='+data.video+' type="video/mp4 "></source>' );

在onclick

4 个答案: