Question

如何设置＆lt;视频＆gt;在<li><a href="#"><p>Ethnics</p></a></li>

使用以下视频：

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

ŠimeVidas的更新 HTML

<ul class="lists_video" id="list">
        <li><a href="#" class="video_trigger">Ethnics</a><video width="320" height="270" controls>
                    <source src="video/steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
                    <source src="video/steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
                    <source src="video/steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis"></video></li>
        </ul>

CSS和JS，ŠimeVidas建议使用示例代码。

Answer 1

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

<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

Answer 2

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元素。

<a href="#"></a> </video>中的<video>

2 个答案: