我在我的页面上有jwPlayer,并且以下是标记:
它的外观如下:
当页面加载时,一切都正常(第一个视频已经加载)。但是当我点击另一个视频(图片上)时,播放器消失了。如果我再次点击,则播放器会出现。还有另一个问题:当我两次点击所有图像时,例如,当我首先点击第一个时,它会播放先前加载的文件,再次单击将播放正确的文件。
这是我的JS:
div class="block_video">
<div class="slider_video" id="slider_video">
<div class="navigation_container">
<div class="navigation">
<ul class="thumbs">
<% foreach (var publicationVideo in Model.PublicationVideos)
{%>
<li><a id='<%=publicationVideo.PathToVideo %>' data-isurl="<%=publicationVideo.IsUrl %>" href="/assets/images/i/2.jpg" class="thumb" title="<%=Model.Name %>">
<img src="/assets/images/video-content.png" width="49px" height="41px" />
</a>
<div class="caption">
<div id="video_player">
</div>
<div class="caption_video">
<%=Model.Name %></div>
</div>
</li>
<% } %>
</ul>
<!-- .thumbs-->
</div>
<!-- .navigation-->
</div>
<!-- .navigation_container-->
<div class="slideshow">
<div class="render">
</div>
<div class="caption-container">
</div>
</div>
<!-- .slideshow-->
</div>
<!-- .slider_video-->
</div>
<!-- .block_video-->
它的外观如下:
![enter image description here](https://istack.dev59.com/PpeY0.webp)
这是我的JS:
<script type="text/javascript">
$(document).ready(function () {
var isUrlOnReady = $(".block_video a").attr("data-isurl");
var providerOnReady;
if (isUrlOnReady === "True")
providerOnReady = "youtube";
else
providerOnReady = "http";
loadPlayer('<%=Url.Action("GetVideo", "Video", new {videoName = Model.PublicationVideos[0].PathToVideo}) %>', providerOnReady);
$(".block_video a").click(function () {
var isUrl = $(this).attr("data-isurl");
var fileName = $(this).attr("id");
var provider;
var path;
if (isUrl === "True") {
provider = "youtube";
path = fileName;
}
else {
provider = "http";
path = '<%=Url.Action("GetVideo", "Video", new {videoName = -1}) %>';
path = path.replace("-1", fileName);
}
loadPlayer(path, provider);
});
});
// load player
function loadPlayer(fileName, provider) {
jwplayer("video_player").setup({
flashplayer: '<%=Url.Content("~/assets/js/jwplayer/player.swf")%>',
file: fileName,
height: 173,
width: 210,
provider: provider,
controlbar: 'bottom'
});
}
</script>