Question

我有一个页面，其中包含一个视频链接表（思考播放列表），每个页面都包含一个vimeo ID。我还有一个针对Vimeo视频进行了优化的HTML5播放器，我只需要在点击所选视频时更改ID。

我的代码如下：

视频播放器：

<?php 
    <iframe width="100%" height="520" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="//player.vimeo.com/video/[ID-GOES-HERE]" id="myvideo"></iframe>
?>

我的表格如下：

<table width="100%">
    <tbody>
        <tr>
            <td valign="middle" class="media"><p><a href="#"><i class="fa fa-play-circle-o"></i></a></p></td>
            <td valign="middle" class="name"><p>Christmas Chapel<span>Dr William M Wilson</span></p></td>
            <td valign="middle" class="info"><p>Special Christmas Chapel</p></td>
            <td valign="middle" class="day"><p>December 02, 2015</p></td>
        </tr>
        <tr>
            <td valign="middle" class="media"><p><a href="#"><i class="fa fa-play-circle-o"></i></a></p></td>
            <td valign="middle" class="name"><p>Christmas Chapel<span>Dr William M Wilson</span></p></td>
            <td valign="middle" class="info"><p>Special Christmas Chapel</p></td>
            <td valign="middle" class="day"><p>December 01, 2015</p></td>
        </tr>
    </tbody>
</table>

我想拥有它，以便当有人点击12月2日的“a”标签时，它会将视频vimeo id推入播放器并开始自动播放视频。如果我点击它，它还需要用Dec 1st覆盖Dec 2nd值。

这样做的最佳方式是什么？

Answer 1

如果是我，我会给iframe一个id，以便更容易引用。然后使用jquery更改为src。

<iframe id="myiframe" width="100%" height="520" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="//player.vimeo.com/video/[ID-GOES-HERE]" id="myvideo"></iframe>

<a href="#" class="thelinks" onclick="replace_src('ABC_THE_VIMEO_ID_XYZ');"><i class="fa fa-play-circle-o"></i></a>

<script>
function replace_src(vimeoid) {   $('#myiframe').attr("src", "http://player.vimeo.com/video/"+vimeoid); }
</script>

点击时使用jQuery或Javascript更改变量值

1 个答案: