Why video is not playing, first time it will play on dynamically changing it will not play











up vote
7
down vote

favorite












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.










share|improve this question
























  • check my answer
    – MostafaMashayekhi
    Nov 14 at 6:34















up vote
7
down vote

favorite












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.










share|improve this question
























  • check my answer
    – MostafaMashayekhi
    Nov 14 at 6:34













up vote
7
down vote

favorite









up vote
7
down vote

favorite











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.










share|improve this question















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.






$(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>





$(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>






javascript jquery video video.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 13 at 5:40









MostafaMashayekhi

4,9361726




4,9361726










asked Nov 10 at 4:44









skBangalore

54110




54110












  • check my answer
    – MostafaMashayekhi
    Nov 14 at 6:34


















  • check my answer
    – MostafaMashayekhi
    Nov 14 at 6:34
















check my answer
– MostafaMashayekhi
Nov 14 at 6:34




check my answer
– MostafaMashayekhi
Nov 14 at 6:34












3 Answers
3






active

oldest

votes

















up vote
3
down vote



+50










You are initializing video player again and again, but I think you just need to change source. Please try following.






$(function(){

$('.player-src').on('click',function(){

var videosrc = $(this).attr('data-src');
var myPlayer = videojs('#my_video_1');
myPlayer.src([
{ type: "video/mp4", src: videosrc },
{ type: "video/webm", src: videosrc },
{ type: "video/ogg", src: videosrc }]
);
});

});

<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] }'>
</video>








share|improve this answer























  • @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
    – Amit Bhoyar
    Nov 19 at 23:02


















up vote
2
down vote













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...






share|improve this answer






























    up vote
    1
    down vote













    An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.



     var player = videojs('#my_video_1');


    After an instance has been created it can be accessed globally ussing player



    Problem



    your mistake is set source as an optional for every element onclick event. you must set src for every onclick event



    Html:



    <html>
    <body>
    <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="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
    </video>
    </body>
    </html>


    Script:



     $(function () {
    var player = videojs('#my_video_1');
    $('.player-src').on('click', function () {
    var videosrc = $(this).attr('data-src');
    player.src([
    { type: "video/mp4", src: videosrc },
    { type: "video/webm", src: videosrc },
    { type: "video/ogg", src: videosrc }]
    );
    player.play();
    });
    });


    Example:



    https://codepen.io/mostafami/pen/xQgxao






    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236056%2fwhy-video-is-not-playing-first-time-it-will-play-on-dynamically-changing-it-wil%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      3
      down vote



      +50










      You are initializing video player again and again, but I think you just need to change source. Please try following.






      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>








      share|improve this answer























      • @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
        – Amit Bhoyar
        Nov 19 at 23:02















      up vote
      3
      down vote



      +50










      You are initializing video player again and again, but I think you just need to change source. Please try following.






      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>








      share|improve this answer























      • @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
        – Amit Bhoyar
        Nov 19 at 23:02













      up vote
      3
      down vote



      +50







      up vote
      3
      down vote



      +50




      +50




      You are initializing video player again and again, but I think you just need to change source. Please try following.






      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>








      share|improve this answer














      You are initializing video player again and again, but I think you just need to change source. Please try following.






      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>








      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>





      $(function(){

      $('.player-src').on('click',function(){

      var videosrc = $(this).attr('data-src');
      var myPlayer = videojs('#my_video_1');
      myPlayer.src([
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
      });

      });

      <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] }'>
      </video>






      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Nov 12 at 17:46

























      answered Nov 12 at 17:37









      Amit Bhoyar

      3749




      3749












      • @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
        – Amit Bhoyar
        Nov 19 at 23:02


















      • @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
        – Amit Bhoyar
        Nov 19 at 23:02
















      @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
      – Amit Bhoyar
      Nov 19 at 23:02




      @skBangalore, Could you please accept the answer if this you think this is the best solution for your query?
      – Amit Bhoyar
      Nov 19 at 23:02












      up vote
      2
      down vote













      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...






      share|improve this answer



























        up vote
        2
        down vote













        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...






        share|improve this answer

























          up vote
          2
          down vote










          up vote
          2
          down vote









          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...






          share|improve this answer














          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...







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 11 at 20:21

























          answered Nov 11 at 20:15









          Dave

          1,14121117




          1,14121117






















              up vote
              1
              down vote













              An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.



               var player = videojs('#my_video_1');


              After an instance has been created it can be accessed globally ussing player



              Problem



              your mistake is set source as an optional for every element onclick event. you must set src for every onclick event



              Html:



              <html>
              <body>
              <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="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
              <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
              </video>
              </body>
              </html>


              Script:



               $(function () {
              var player = videojs('#my_video_1');
              $('.player-src').on('click', function () {
              var videosrc = $(this).attr('data-src');
              player.src([
              { type: "video/mp4", src: videosrc },
              { type: "video/webm", src: videosrc },
              { type: "video/ogg", src: videosrc }]
              );
              player.play();
              });
              });


              Example:



              https://codepen.io/mostafami/pen/xQgxao






              share|improve this answer

























                up vote
                1
                down vote













                An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.



                 var player = videojs('#my_video_1');


                After an instance has been created it can be accessed globally ussing player



                Problem



                your mistake is set source as an optional for every element onclick event. you must set src for every onclick event



                Html:



                <html>
                <body>
                <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="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
                <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
                </video>
                </body>
                </html>


                Script:



                 $(function () {
                var player = videojs('#my_video_1');
                $('.player-src').on('click', function () {
                var videosrc = $(this).attr('data-src');
                player.src([
                { type: "video/mp4", src: videosrc },
                { type: "video/webm", src: videosrc },
                { type: "video/ogg", src: videosrc }]
                );
                player.play();
                });
                });


                Example:



                https://codepen.io/mostafami/pen/xQgxao






                share|improve this answer























                  up vote
                  1
                  down vote










                  up vote
                  1
                  down vote









                  An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.



                   var player = videojs('#my_video_1');


                  After an instance has been created it can be accessed globally ussing player



                  Problem



                  your mistake is set source as an optional for every element onclick event. you must set src for every onclick event



                  Html:



                  <html>
                  <body>
                  <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="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
                  <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
                  </video>
                  </body>
                  </html>


                  Script:



                   $(function () {
                  var player = videojs('#my_video_1');
                  $('.player-src').on('click', function () {
                  var videosrc = $(this).attr('data-src');
                  player.src([
                  { type: "video/mp4", src: videosrc },
                  { type: "video/webm", src: videosrc },
                  { type: "video/ogg", src: videosrc }]
                  );
                  player.play();
                  });
                  });


                  Example:



                  https://codepen.io/mostafami/pen/xQgxao






                  share|improve this answer












                  An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.



                   var player = videojs('#my_video_1');


                  After an instance has been created it can be accessed globally ussing player



                  Problem



                  your mistake is set source as an optional for every element onclick event. you must set src for every onclick event



                  Html:



                  <html>
                  <body>
                  <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="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
                  <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
                  </video>
                  </body>
                  </html>


                  Script:



                   $(function () {
                  var player = videojs('#my_video_1');
                  $('.player-src').on('click', function () {
                  var videosrc = $(this).attr('data-src');
                  player.src([
                  { type: "video/mp4", src: videosrc },
                  { type: "video/webm", src: videosrc },
                  { type: "video/ogg", src: videosrc }]
                  );
                  player.play();
                  });
                  });


                  Example:



                  https://codepen.io/mostafami/pen/xQgxao







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 13 at 6:52









                  MostafaMashayekhi

                  4,9361726




                  4,9361726






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236056%2fwhy-video-is-not-playing-first-time-it-will-play-on-dynamically-changing-it-wil%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      Xamarin.form Move up view when keyboard appear

                      Post-Redirect-Get with Spring WebFlux and Thymeleaf

                      Anylogic : not able to use stopDelay()