Odtnhj

i'm using videojs plugin to play my videos dynamically on click of each video but it does not play what i'm doing wrong.

$(function()
 
 $('.player-src').on('click',function()
 //alert($(this).attr('data-src'));
 var videosrc = $(this).attr('data-src');
 videojs('my_video_1', 
			 sources: [
			 src: videosrc,
			 type: 'video/mp4'
			 , 
			 src: videosrc,
			 type: 'video/webm'
			 ]
			);
 );

);

ul
 display:block;
 list-style: none;
 background:#eaeaed;
 padding:15px;


li.player-src
 padding: 12px;
 background: orangered;
 color: #fff;
 display: inline-flex;
 margin: 12px;
 cursor: pointer;

<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
 <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
 <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
 <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
 <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
 <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>



 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls 
 
 data-setup=' "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] '>
 
 <!-- <source src="uploads/thursday.mp4" type='video/mp4'/> -->
 <source src="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL' />
 <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
 
</video>

Please help me thanks in advance!!!!

If the only thing that you are trying to achieve, is to have the user be able to select one of the five video files to play, then I'd suggest that your javascript can simply copy the chosen video's filename into the src parameter of a single source-tag, and then the user clicks the play-button to 'play' it.

Also, rather than use the five li tags, you could use a 'drop-down' list, by having five option tags, inside a select tag. Which is how I do it. (Note: if you want all five choices visible at once, set the size parameter of the select tag to "5".)

Ok, here's the URL of one of my video pages, where I have 10 files to choose from. (I make only the first five initially visible, by setting size parameter to 5. A vertical scroll-bar allows you to scroll thru all the 10 choices.)

https://weasel.firmfriends.us/Taxi-Series/

Just do a 'view page source' (by a right-click anywhere on my page),
to view my markup and javascript. Using the select/option tags approach, makes the necessary javascript trivial! (My JS is a bit longer, only because
I need to string-concatenate the filename from segments, and manipulate analogous subtitle text-tags, but in your case, I'd think you'd need no more
than 4 or 5 lines of JS, total.)

Oh, and all the CSS and markup for the 'hero" text is NOT necessary for you.
(I added it as an after-thought, to achieve that extra 'floating/dissolving' line of episode-name text, that displays during pause/play transitions.)

I hope this helps. Cheers...