JwPlayer: dynamic change video
12,882
Why are you trying to reinitialize the player every time? Use its API and submit to player URL of the media file. Simple example:
$(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
jwplayer().load($(this).text()).play();
Author by
user348173
Updated on June 09, 2022Comments
-
user348173 almost 2 years
I have jwPlayer on my page and the following markup:
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.
This is my 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>