Question

使用JWPlayer显示我网站上的视频。我使用占位符[[module_video]]来循环播放模块中的视频。

<iframe src="[[module_video]]" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen></iframe>

但我的问题是，如果我点击第一个视频并再次点击第二个视频，它就不会停止第一个视频。这意味着在我的页面中，我想展示唯一应播放的视频。如果用户点击任何其他视频，则必须停止前一个视频。

如何使用嵌入式JWplayer完成此操作？

编辑1：

[[module_video]]的值将类似于以下网址//content.jwplatform.com/players/sample-test.html这种网址。因此，当我的帧加载时，视频会被播放。将为不同的条目输入多个URL，因此每当页面加载所有视频都在页面中时，如果我点击它应该单独播放特定的视频。

编辑2

实际上每个条目都有不同的视频。在我的概述页面中显示带有视频的条目。添加条目时，我会在我的模块中添加http://leanbackplayer.com/example_iframe.html条目的视频链接。

在我的概述页面中，我将通过占位符[[module_video]]显示模块中的视频。因此，在我的概述页面中将显示所有条目的条目名称和视频。在这种情况下，我想要停止除最后一个之外所有正在播放的视频。

Answer 1

ids是jwp1，jwp2和jwp3

  jwp1.on('play',function(){ pauseOthers(1); });
  jwp2.on('play',function(){ pauseOthers(2); });
  jwp3.on('play',function(){ pauseOthers(3); });

  function pauseOthers(target) { 
    for (var i=1; i<4; i++) {
       if(i != target) { jwplayer("jwp"+i).pause(true); }
    }
  };

用法

pauseOthers(3);

// jwp3将播放，jwp1和jwp2将暂停

参考：https://support.jwplayer.com/customer/portal/articles/1439797-example-mutually-exclusive-playback

Answer 2

我在我的网站上使用嵌入式播放器，并有一个脚本来聆听“播放”。事件和该事件有一个循环遍历活动视频元素暂停所有活动视频元素：

<script>
    document.addEventListener('play', function(e){
    var videos = document.getElementsByTagName('video');
    console.log(videos);
    for(var i = 0, len = videos.length; i < len;i++){
        if(videos[i] != e.target){
            videos[i].pause();
            }
        }
    }, true);
</script>

使用嵌入式JWPlayer停止在页面上多个播放视频

2 个答案: