多くのビデオ サムネイルがあり、誰かがサムネイルをクリックしたときに、サムネイルの上に元のビデオ プレーヤーを表示しようとしています。jwplayer を使用しており、サムネイルをクリックすると元のビデオを表示したいと考えています。div に動画の URL を指定し、jwplayer を表示してサイズを 100% に変更します。
誰かがボタンをクリックすると、プレイヤーが幅と高さ 0% で非表示になるようにします (サムネイルの余白や空白を防ぐため)。別のサムネイルをクリックすると、ビデオの URL が変更され、非表示または表示されます。このコードは機能しません。誰にもアイデアはありますか?
すべての div が定義されています。
Jクエリはこちら
$(document).ready(function() {
$(".popup_link2").click(function(e) {
e.preventDefault();
$("#video").html( jwplayer('video').attr('file', $(this).attr("href")) );
jwplayer("video").resize('100%', '400');
});
});
$(document).ready(function() {
$(".btn").click(function() {
jwplayer("video").resize('0', '0');
});
});
こちらがjwplayerです。そして、部門。
<div class="thumball">
<% @project.assets.each do |asset1| %>
<% if asset1.video.file? %>
<li class="thumbnail span1 col-md-2" id="thumb2" style="border: none; float: none; display: inline-block !important; float: none !important; position: relative;">
<%= link_to asset1.video.url(:orginal), class: :popup_link2, target: :_blank do %>
<div class="picture1">
<span class="roll" ></span>
</div>
<% end %>
<% end %>
<script type="text/javascript">
jwplayer("video").setup({
flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
file: '<%= asset1.video.url(:original) %>',
primary: "flash",
height: 0,
width: 0,
analytics: {
enabled: false,
cookies: false
}
});
</script>
<% end %>
</li>
</div>