如何动态改变视频源，播放不同的视频

Question

我正在使用 plyr.js https://github.com/sampotts/plyr

问题：我无法更改视频源并播放每个视频

设置方法如下：

$(function(){
  
    $('.player-src').on('click',function(){
       var videosrc = $(this).attr('data-src');
       //for video
         $('#plyr-video source').attr('src',videosrc);
       plyr.setup();
         
        // for audio
         $('#plyr-audio source').attr('src',videosrc);
       plyr.setup();
   });

});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/2.0.15/plyr.js"></script>
<link href="https://cdn.plyr.io/2.0.15/plyr.css" rel="stylesheet"/>
<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>



 <audio id="plyr-audio" controls>
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type="audio/mp3">
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type="audio/ogg">
                    </audio>


<video id="plyr-video" poster="/path/to/video-poster.png" controls style="max-width: 533px;">
                    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/mp4">
                    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                    <!-- Captions are optional -->
                    <track kind="captions" label="English captions" src="/path/to/video-caption.vtt" srclang="en" default>
                  </video>

请提前帮助我！！

Answer 1

您可以直接设置 .source 属性，这允许即时更改播放器来源和类型。

这里 full demo 显示了如何动态更改视频，您可以使用声音播放器做同样的事情。以下是如何操作的片段：

player.source = {
    type: 'video',
    title: 'Example title',
    sources: [
        {
            src: '/path/to/movie.mp4',
            type: 'video/mp4',
            size: 720,
        } 
    ],
    poster: '/path/to/poster.jpg'
};

如何动态改变视频源，播放不同的视频

How to change the video souce dynamically so that different videos can be played

javascript

jquery

node.js

plyr.js