Question

我创建了一个显示视频的弹出窗口。当我点击链接时，＆＃39; data-vid-link＆＃39;的属性值将被复制并放入te＆＃39; src＆＃39;位于弹出窗口内的视频源的属性。视频属性＆＃39; src＆＃39;在点击之前是空的。点击链接后，它将被替换为复制的值。

到目前为止一切正常。但是当弹出窗口出现时，视频没有出现。但奇怪的是，当我查看源代码时，视频链接会被成功复制。

如果我手动插入它工作正常。但那不是我想要的......

<article>
<header class="bubble">Video display</header>
<a href="" data-vid-link="vid/moviesample.mp4" class="vidlnk"><img src="images/tmb-vidpl.gif"></a>
</article>

这是在点击之前视频src为空的弹出式div。

<div class="overlay"></div>
<div class="popup">
<span class="close"></span><video controls><source src="" type="video/mp4">Your browser does not support the video tag.</video>
</div>

这是jquery

    $('.vidlnk').click(function(event){
    event.preventDefault();
    var attr = $(this).attr("data-vid-link");
        $('video source').attr('src',attr);
        $(".overlay,.popup").show();
        $(".popup").center();

    });

弹出和叠加的css代码

.overlay {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(204,204,153,0.5);}
.popup {display:none;width:50%;height:auto;position:fixed;z-index:200;}
.close {position:absolute;top:-31px;right:0px;background:red;padding:0px 10px;color:white;font-size:1.4em;}
.close:before {content:"x";font-weight:bold;}
.close:hover {cursor:pointer;}
video {width: 100%!important;height: auto!important;}

Answer 1

$('video source').attr('src',attr);
$("video")[0].load(); //<-newly added

诀窍tnx到以下帖子：

https://stackoverflow.com/a/3983065/985251

使用jquery在popup中插入视频src不起作用

1 个答案: