html - 在

Answer 1

HTML：

<ul id="list">
    <li>
        <a href="#" class="video_trigger">Ethnics</a>
        <video width="320" height="270" controls>
            <!-- your <source> elems here -->
        </video>
    </li>
</ul>

CSS：

#list video { display: none; }

JavaScript：

$( '#list' ).on( 'click', '.video_trigger', function () {
    $( this ).siblings( 'video' ).show();
});

因此，您最初使用 CSS 隐藏了 VIDEO 元素。然后，当.video_trigger单击锚点时，会显示其对应的 VIDEO 元素。

Answer 2

这对我来说非常有效。除非我在这里遗漏了什么？

<li>
    <a href="http://whatever.com">
        <video width="320" height="270" controls>
            <source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
            <source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
            <source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
        </video>
    </a>
</li>

JSfiddle：http: //jsfiddle.net/SaHku/

请注意点击视频如何打开网址。

编辑

我认为这是真正想要的：

<a href="#" onclick="$('#video').show(); $(this).hide();">Show Video!</a>
<div id="video">
    <video width="320" height="270" controls>
        <source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
        <source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
        <source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
    </video>
</div>
<script>
$('#video').hide();
</script>

JSfiddle：http: //jsfiddle.net/fYFvQ/2/

这是假设你有jQuery