需要创建一个网站在视频窗口中的实时流页面时,没有视频流可能会有一个海报,如果你会,直到视频显示。将感谢所有的帮助,我可以得到。(我已经有了iframe标签,只是想知道这是否可能。对于我使用bootstrap的网站。感谢Falkon
wko9yo5t1#
试试这个,因为你有jquery标记。
$(function() { var videos = $(".video"); videos.on("click", function(){ var elm = $(this), conts = elm.contents(), le = conts.length, ifr = null; for(var i = 0; i<le; i++){ if(conts[i].nodeType == 8) ifr = conts[i].textContent; } elm.addClass("player").html(ifr); elm.off("click"); }); });
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; } .video:after { content: ""; position: absolute; display: block; background: url(play-button.png) no-repeat 0 0; top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* image poster clicked, player class added using js */ .video.player img { display: none; } .video.player:after { display: none; }
<div class="video"> <img src="poster.jpg"> <iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe> </div>
dauxcl2d2#
JavaScript是没有必要的。海报图像只是一个背景。如果视频是空的,那么使用海报图像作为背景图像
<div style={{ background: `url(${poster}) top center no-repeat; background-size: cover;` }} > <iframe src={`https://www.youtube.com/embed/${embedId}`} width="100%" height="100%" frameborder="0" allowfullscreen /> </div>
字符串
2条答案
按热度按时间wko9yo5t1#
试试这个,因为你有jquery标记。
dauxcl2d2#
JavaScript是没有必要的。海报图像只是一个背景。如果视频是空的,那么使用海报图像作为背景图像
字符串