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!!!!
from Why video is not playing or showing, first time it will play on dynamically changing it will not play
No comments:
Post a Comment