我正在使用videojs插件动态播放我的视频点击每个视频,但它不会播放我做错了什么.
$(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" src="/local/filename.mp4">play-video1</li>
<li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
<li class="player-src" src="/local/filename.mp4">play-video3</li>
<li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
<li class="player-src" 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(){
var videosrc = $(this).attr('data-src');
var myPlayer = videojs('#my_video_1');
myPlayer.src([
{ type: "video/mp4",src: videosrc },{ type: "video/webm",{ 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" src="/local/filename.mp4">play-video1</li>
<li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
<li class="player-src" src="/local/filename.mp4">play-video3</li>
<li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
<li class="player-src" 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",2] }'>
</video>
