为什么视频不播放，第一次会播放动态更改它不会播放答案

【问题标题】：Why video is not playing, first time it will play on dynamically changing it will not play为什么视频不播放，第一次会播放动态更改它不会播放
【发布时间】：2018-11-10 04:44:56
【问题描述】：

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

【解决方案1】：

您一次又一次地初始化视频播放器，但我认为您只需要更改源即可。请尝试关注。

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

【讨论】：

@skBangalore，如果您认为这是您查询的最佳解决方案，请您接受答案吗？

【解决方案2】：

如果您想要实现的唯一目标是让用户能够选择五个视频文件之一来播放，那么我建议您的 javascript 可以简单地将所选视频的文件名复制到 src单个源标签的参数，然后用户单击播放按钮来“播放”它。

此外，您可以使用“下拉”列表，而不是使用五个 li 标记，方法是在一个 select 标记中包含五个选项标记。我就是这样做的。（注意：如果您想同时显示所有五个选项，请将 select 标签的 size 参数设置为“5”。）

好的，这是我的一个视频页面的 URL，我有 10 个文件可供选择。（通过将 size 参数设置为 5，我只使前五个最初可见。垂直滚动条允许您滚动浏览所有 10 个选项。）

https://weasel.firmfriends.us/Taxi-Series/

只需执行“查看页面源代码”（通过右键单击我页面上的任意位置），查看我的标记和 javascript。使用选择/选项标签方法，使必要的 javascript 变得微不足道！（我的JS有点长，只是因为我需要将段中的文件名进行字符串连接，并操作类似的字幕文本标签，但在你的情况下，我认为你不需要更多总共不到 4 或 5 行 JS。）

哦，“英雄”文本的所有 CSS 和标记对您来说都不是必需的。（我在事后添加了它，以实现在暂停/播放转换期间显示的额外的“浮动/溶解”剧集名称文本行。）

我希望这会有所帮助。干杯...

【讨论】：

【解决方案3】：

当使用任何 Video.js 设置方法初始化视频时，将创建 Player 类的实例。

 var player = videojs('#my_video_1');

创建实例后，可以使用 player 全局访问它

问题

您的错误被设置为 source 每个元素 onclick 事件的可选。您必须为每个 onclick 事件设置 src

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>

脚本：

 $(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();
    });
});

示例：

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

【讨论】：