javascript JwPlayer:动态变化视频
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9221994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JwPlayer: dynamic change video
提问by user348173
I have jwPlayer on my page and the following markup:
我的页面上有 jwPlayer 和以下标记:
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-->
It's looks as follows:
它的外观如下:
When page is load all works fine(first video was load). But when I click on another video(on image) then player is dissapper. If I click again then player is apper. And another problem: When I click on all images twice, then when I click for example on the first, it plays the previous loaded file, click once again plays the correct file.
当页面加载时一切正常(加载第一个视频)。但是当我点击另一个视频(在图像上)时,播放器就会消失。如果我再次单击,则播放器是 appper。另一个问题:当我单击所有图像两次时,然后当我单击例如第一个时,它会播放以前加载的文件,再次单击播放正确的文件。
This is my JS:
这是我的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>
回答by Cheery
Why are you trying to reinitialize the player every time? Use its API and submit to player URL of the media file. Simple example:
为什么每次都尝试重新初始化播放器?使用其 API 并提交到媒体文件的播放器 URL。简单的例子:
$(document).ready(function () {
jwplayer('player').setup({
flashplayer: 'player.swf',
height: 173,
autostart: true,
width: 210,
controlbar: 'bottom'
});
$('.media').click(function(){
jwplayer().load($(this).text());
})
});
</script>
<div id='player'></div><br />
<div class='media'>video.mp4</div>
<div class='media'>video2.mp4</div>
Without autostart: true
you can load media and play it as
没有autostart: true
您可以加载媒体并将其播放为
jwplayer().load($(this).text()).play();