时间戳

首页 > 解决方案 > 如何动态更改视频源以便播放不同的视频

javascript - 如何动态更改视频源以便播放不同的视频

问题描述

我正在使用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>

请提前帮助我！

标签： javascriptjquerynode.jsplyr.js

解决方案

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

这是一个完整的演示，展示了如何动态更改视频，您可以使用声音播放器做同样的事情。下面是一个片段如何做到这一点：

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

推荐阅读