Question

我正在使用#data { display: grid; grid-template-columns: repeat(8, max-content); grid-template-rows: auto; } <section id="data"> ... <div>1000</div><div>axelle</div><div>G</div><div>92,296</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1001</div><div>axes</div><div>G</div><div>88,536</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1002</div><div>axethrowing</div><div>G</div><div>138,823</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1003</div><div>axial</div><div>G</div><div>395,943</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1004</div><div>axialracing</div><div>G</div><div>165,508</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1005</div><div>axilas</div><div>G</div><div>87,736</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1006</div><div>axiom</div><div>G</div><div>110,834</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1007</div><div>axioo</div><div>G</div><div>321,874</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div> ... </section>插件在点击每个视频时动态播放我的视频，但它没有播放我做错的事情。

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;
}

请提前帮助我。

Answer 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>

Answer 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和“英雄”文本的标记。（我将其添加为事后考虑，以实现在暂停/播放过渡期间显示的额外的“名称浮动”的情节名称文本行。）

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

Answer 3

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

 var player = videojs('#my_video_1');

创建实例后，可以使用player

对其进行全局访问

问题

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

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

为什么不播放视频，第一次播放时会动态更改，因此无法播放

3 个答案: