how to play video in jwplayer when onclick function called....playlist

Question

i am working on MVC5 video website with embedded jwplayer, the "file" value is assigned dynamically from @viewBag.VideoUrl to jwplayer and video plays with no problem...All videos from database loaded on the episodeList view, now for multiple videos or video_playlist, i want to play video which i select by clicking as can be seen from snapshot at the end..i been reading about doing the playlist technique via RSS feed,,,Is it the only way to create PlayList Rss feed???

player script

<div id="mediaplayer"></div>
  <script type="text/javascript">
    $(document).ready(function(){
        jwplayer('mediaplayer').setup({
            'file': 'rtmp://872083564.r.cdnsun.net/872083564/_definst_/mp4:872083564/
             @ViewBag.VideoUrl',
            'autostart': true,
            'width': 320,
            'height': 240,
            rtmp: {
                securetoken: "fsdf5sdfsdf43f5"
            },
        });
    });
    </script>

View Code For Displaying All videos in 3 columns of table, with foreach loop to execute each of the item,,i want to try "onclick for href" but dont know how to do it,nothing else

   const int NumberOfColumns = 3; int skip = 0; var items = Model.Skip(skip).Take(NumberOfColumns);
while (items.Count() > 0) {
<tr>
    @foreach (var item in items) {
    <td width="450">
     <table class="thumbmain">
     <tr>
     <td>
     <a href="" />
     <img src="@Url.Content(item.PosterUrl)" width="120" height="120" class="imageclass"
       onclick="someAction" />
    </td>
    </tr>
    <tr>
    <td style="text-align: center; font-weight: bold; color: Teal">
    @item.Title
    </td>
    </tr>
    </table>
    </td>
    }
</tr>
skip += NumberOfColumns; items = Model.Skip(skip).Take(NumberOfColumns); } } </table>
</div> </div> </div>

Controller Action

public ActionResult EpisodeList(Guid? id)
{
    IQueryable<VideoEpisodeDM> episodesdm = db.VideoEpisode
        .Where(ve => ve.VideoId == id);

    string video;

    foreach (var item in episodesdm)
    {
        video = item.Title;
        ViewBag.VideoUrl = item.VideoUrl;
    }


    return View(episodesdm.ToList());
}

The output:

i want to play videos accordingly like if i click "downTo" it should load/play "downTo" video, if "finaltick" then finaltick url should load in file''....if there is a way please help or reference will be appreciated...Thanks for your time

Answer 1

Do you mean something like this?

http://support.jwplayer.com/customer/portal/articles/1439570-example-loading-new-playlists

Place the following embed code at the location you want the player to appear:

<div id="myElement"></div>

<script>
  jwplayer("myElement").setup({
    image: "/uploads/myPoster.jpg",
    file: "/uploads/myVideo.mp4",
    title: "My Cool Trailer"
  });
</script>

Second, add the JavaScript to implement the load behaviour:

<script>
  function loadVideo(myFile,myImage) { 
    jwplayer().load([{
      file: myFile,
      image: myImage
    }]);
    jwplayer().play();
  };
</script>

Last, add some HTML that calls this function with the correct files and images:

<li><a href="javascript:loadVideo('file1.mp4','image1.jpg')">Video 1</a></li>
<li><a href="javascript:loadVideo('file2.mp4','image2.jpg')">Video 2</a></li>
<li><a href="javascript:loadVideo('file3.mp4','image3.jpg')">Video 3</a></li>