Question

我在jsfiddle上有一个中间元素示例，我用它来播放视频并在每52秒后重复一次。

这是小提琴

http://jsfiddle.net/codebreaker87/30t50mgc/17/

和html

<video id="youtube1" width="640" height="360" autoplay="true"></video>

和jquery

$(document).ready(function(){
  setInterval(function() {
    var player = new MediaElementPlayer('#youtube1', {
        type: ['video/webm'],
        success: function (mediaElement, domObject) {
            var sources = [
                { src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm", type: 'video/webm' },
];
            mediaElement.setSrc(sources);
            mediaElement.load();
            mediaElement.play();
        }
    });
}, 52000);
});

视频在52秒后不再播放，这也是视频的长度。

Answer 1

你让它变得比它需要的复杂得多。当video元素的播放结束时，会引发ended事件。您可以挂钩该事件，然后通过调用play()再次开始播放视频。这具有使代码更简单的优点，但是如果用户向前/向后跳过视频也可以。使用您当前的方法，计时器可能非常容易与视频状态不同步。试试这个：

＆＃13;

var player = new MediaElementPlayer('#youtube1', {
  type: ['video/webm'],
  success: function(mediaElement, domObject) {
    var sources = [{
      src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm",
      type: 'video/webm'
    }];
    mediaElement.setSrc(sources);
    mediaElement.load();
    mediaElement.play();

    mediaElement.addEventListener('ended', function() {
      this.play();
    })
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.min.js"></script>
<video id="youtube1" width="640" height="360" autoplay="true"></video>

＆＃13;

使用mediaelement每n秒播放一次视频

1 个答案: