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

Question

I have a page with a table of video links (think playlist) that each contain a vimeo id. I also have an HTML5 player that is optimized for Vimeo videos and I simply need to change the ID upon clicking on a selected video.

My code is as follows:

Video Player:

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

My table is as follows:

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

I would like to have it so that when anyone clicks on the "a" tag for Dec 2nd it pushes that videos vimeo id into the player and starts autoplaying the video. It would also need to override the Dec 2nd value with Dec 1st if I click on that.

What is the best way of doing this?

Answer 1

If it were me, I would give the iframe an id to make it easier to reference. Then use jquery to change to 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>