Question

我想弄清楚，当我有大约10个视频时，如何重现单个视频。

每个视频都有一个“预览”按钮，我正在尝试至少获取整个标签。

应如何编写脚本？

<script>
$(document).ready(function() {
    $('button').click(function() {
        var test = $(this).parent().html();
        alert(test);
    });
});
</script>
</head>

<body>

<div id="container">
<?php
foreach($dblines as $video_data) {
    list($number, $duration, $prize, $desc) = explode("|", $video_data); ?>
<div id="wrapper">
<div id="wrap_img_vid">
    <video id="player" controls src="./preview/pre_<?= $number ?>.webm" poster="./preview/img_<?= $number ?>.jpg"></video>
    <span>N°<?= $number ?></span><span>Durata: <?= $duration?></span>
    <p><?= $desc ?></p>
    <button>Preview</button>
</div>
</div><?php } ?>

</div>

jQuery代码仅用于测试，因为我的所有尝试始终失败。许多小时后，我决定在这里写信，希望对您有所帮助。非常感谢！

Answer 1

这可以通过许多不同的方式来实现。

您首先必须将外部div（包装器）作为目标。在您的代码中，id并非毫无道理。如果您不将id设为唯一，则会遇到问题。

但是，您可以完全摆脱id并提供一个类，然后再访问它。所以，除了这个，

<div id="wrap_img_vid">

像这样更改元素

<div class="wrap_img_vid"></div>

然后，针对该块并到达按钮。这是访问按钮单击的JS代码。

$(document).ready(function() {
   setTimeout(function() {
       $('.wrap_img_vid button').click(function() {
          var vid = $(this).siblings("video")[0];          
          if(vid.paused) {
              vid.play(); 
          } else { 
            vid.pause(); 
          }
       });
  });
});

这是一个小提琴：-https://jsfiddle.net/anjanasilva/5pmckwns/

由于您处于循环状态，因此可能需要用click包装setTimeout。

要播放视频，您需要进入该元素并触发play()。像这样的东西可以解决问题，

$(this).siblings("video")[0].play();

要在按下paused按钮之前检查视频是否为play，可以执行以下操作，

var vid = $(this).siblings("video")[0];
vid.paused ? vid.play() : vid.pause();

希望这会有所帮助。

如何将一组视频容器中的每个按钮与其视频相关联？

1 个答案: